Angular下拉选单去重问题：过滤用下拉框选项重复需优化

你的核心问题是原代码中判断数组是否存在元素的逻辑错误，导致重复项被添加到persons数组里。下面是具体的修复方案：

问题根源 #

原代码里用element.registerBy in this.persons来判断是否已存在该用户，但in操作符是用来检查对象的属性名，而persons是数组，这个判断永远返回false，所以所有registerBy的值都会被push进数组，造成重复。

修复方案 #

方案1：使用Set快速去重（推荐） #

直接利用ES6的Set数据结构自动去重的特性，一行代码搞定：

// 在loadData()函数内替换原循环逻辑
this.persons = [...new Set(this.currentHistory.map(item => item.registerBy))];

原理：先把currentHistory里所有registerBy的值提取成数组，再转成Set自动去重，最后用扩展运算符...转回数组。

方案2：用数组includes方法判断 #

如果需要兼容旧环境，或者更直观的逻辑，可以用Array.includes()来检查元素是否已存在：

// 在loadData()函数内替换原循环逻辑
this.persons = [];
this.currentHistory.forEach((element: any) => {
  // 检查当前registerBy是否已在persons数组中
  if (!this.persons.includes(element.registerBy)) {
    this.persons.push(element.registerBy);
  }
});

其他说明 #

• HTML部分代码无需修改，过滤功能保持正常运行。
• 如果需要对去重后的选项排序，可以在去重后加上排序逻辑，比如：

  this.persons = [...new Set(this.currentHistory.map(item => item.registerBy))].sort();
  

内容的提问来源于stack exchange，提问作者Renatta Quiroz