Angular自定义下拉框切换时如何移除选中值数组中的旧值

AI 小北

2026-6-22

解决方案

你的问题出在每次选择时直接将值push进数组，没有针对对应颜色的下拉框做旧值替换，导致同一个下拉框的多次选择会在数组中积累多个值。下面提供两种简洁的解决方式：

方式一：通过过滤数组替换旧值

修改sample.component.ts中的onSelect方法，给每个选中值绑定对应颜色ID，每次选择时先移除该颜色的旧值，再添加新值：

info;
selectedValueArray = [];
colors = [{id:1, name: 'blue'}, {id:2, name: 'green'}, {id:3, name: 'red'}];

onSelect(value, color) {
  // 过滤掉当前颜色对应的旧选中值
  this.selectedValueArray = this.selectedValueArray.filter(item => item.colorId !== color.id);
  // 为新选中值添加颜色ID标识，用于后续匹配
  const selectedItem = { ...value, colorId: color.id };
  this.selectedValueArray.push(selectedItem);
  console.log(this.selectedValueArray);
}

逻辑说明

使用filter方法移除数组中属于当前颜色的所有旧值（保证每个颜色下拉框只有一个选中值）
将选中值与颜色ID合并为新对象，方便后续识别归属
最后将新对象推入数组，确保数组中每个颜色的选中值唯一

如果传给API时不需要colorId，可以通过map方法提取需要的字段：

const apiData = this.selectedValueArray.map(item => ({ name: item.name, age: item.age }));

方式二：用对象存储选中状态（更简洁）

用对象存储每个颜色的选中值（利用对象键的唯一性直接覆盖旧值），最后转成需要的数组格式：

info;
selectedValuesMap = {}; // key为colorId，value为对应选中值
colors = [{id:1, name: 'blue'}, {id:2, name: 'green'}, {id:3, name: 'red'}];

onSelect(value, color) {
  // 直接覆盖对应颜色的旧选中值
  this.selectedValuesMap[color.id] = value;
  // 将对象值转为数组
  this.selectedValueArray = Object.values(this.selectedValuesMap);
  console.log(this.selectedValueArray);
}