Angular两级多选组件：选中/取消时checkedCitiesList出现重复项

逐行核对原方法的逻辑就能定位到三个直接造成重复的bug：

• 原getCheckedCitiesList方法的push操作完全没有存在性校验：只要遍历到当前展示的城市列表里处于选中状态的项，就直接往checkedCitiesList里塞，完全不判断这个对象是不是已经在数组里了。而代码里this.cities每次切换县的时候都会被替换成当前激活县的城市子集，只要触发一次列表更新，就会把当前子集里的所有选中城市全量推一遍，自然就会出现“取消一个选中项后，剩下的选中项全部被重复加进列表”的现象。
• 变量语义错配：this.cities本来应该是「当前侧边栏展示的单个县的城市列表」，但被拿来当计算全局选中城市的数据源，而它根本不包含其他已勾选县的城市数据，基于局部集合做全局列表的增量更新，逻辑边界从一开始就是错的。
• 删除操作没有兜底判断：原代码找被取消城市的索引时，没有对indexOf返回-1的情况做判断，直接执行splice(-1, 1)，会错误删掉数组最后一个元素，进一步打乱列表顺序和内容。

最小改动版（保留原有增量逻辑） #

只需要修改getCheckedCitiesList方法，补上存在性校验和边界判断，不用动其他代码结构：

getCheckedCitiesList() {
  for (let i = 0; i < this.cities.length; i++) {
    const targetCity = this.cities[i];
    const existIndex = this.checkedCitiesList.indexOf(targetCity);
    
    // 取消选中时，只有元素真的存在才执行删除
    if (!targetCity.isSelectedCity) {
      if (existIndex > -1) {
        this.checkedCitiesList.splice(existIndex, 1);
      }
      continue;
    }

    // 选中时，只有元素不存在才执行添加
    if (existIndex === -1) {
      this.checkedCitiesList.push(targetCity);
    }
  }
  this.Apiservice.setValueOfSelectedCityList([...this.checkedCitiesList]);
}

这个改法不改变原有代码的运行逻辑，只补上原来缺失的判断，就能快速解决重复叠加的问题。

推荐的健壮性版本（从根源避免状态不一致） #

手动维护数组的push、splice操作很容易因为边界判断不全出问题，完全可以抛弃增量维护的思路，每次状态变化时直接从原始数据源重算选中集合：

getCheckedCitiesList() {
  // 从所有已勾选的县的嵌套结构里，直接筛选出所有选中的城市
  this.checkedCitiesList = this.counties
    // 先过滤出所有打勾的县
    .filter(county => county.isSelected)
    // 把这些县下属的所有城市展开成一维数组
    .flatMap(county => county.cities || [])
    // 再从所有城市里筛出真正处于选中状态的项
    .filter(city => city.isSelectedCity);
  
  this.Apiservice.setValueOfSelectedCityList([...this.checkedCitiesList]);
}

这个版本的好处是：

• 完全不需要手动维护数组的添加、删除操作，不管切换多少次县、调整多少次单个城市的选中状态，最终列表都是从原始数据全量计算出来的，从根源上不会出现重复项。
• this.cities只需要作为侧边栏展示用的临时变量，不用再承担全局选中状态的计算职责，逻辑边界更清晰。

• 模板里的复选框事件绑定不要用原生的onchange="xxx()"写法，这种写法在Angular组件里不会触发对应方法，要统一用组件定义的事件绑定（比如(afOnChange)），不然会出现逻辑偶发不触发的问题。
• 原代码里this.cities = this.selectedAllCities这类把布尔值赋值给数组类型变量的笔误要修正，不然会导致后续遍历城市列表时报类型错误。

内容的提问来源于stack exchange，提问作者k.k