本文介绍在 Angular 中结合 RxJS 的 pipe() 操作符，对 valueChanges 触发的 Observable 数据流进行实时去重处理，确保 仅显示 param2 字段的唯一选项，避免重复项干扰用户体验。

本文介绍在 angular 中结合 rxjs 的 `pipe()` 操作符，对 `valuechanges` 触发的 observable 数据流进行实时去重处理，确保 `` 仅显示 `param2` 字段的唯一选项，避免重复项干扰用户体验。

要实现自动补全下拉框中仅展示唯一值（如多个对象具有相同 param2 值时只保留一项），关键在于：在 filter 后链式添加去重逻辑，而非对原始数据源做一次性去重——因为用户输入是动态的，每次搜索结果都需独立去重。

推荐使用 map + Array.from(new Set()) 或 filter 配合 findIndex 实现语义清晰、性能可控的去重。以下是优化后的完整代码：

自定义select加搜索查找angular js

自定义select加搜索查找angular js

下载

this.dropdownSingleFilteredOptions = this.tableFormGroup.controls['filterParam2'].valueChanges.pipe(
  startWith(''),
  map((value: string) => {
    const searchTerm = value?.toLowerCase() ?? '';
    // 步骤1：按搜索条件过滤原始数据
    const filtered = this.tableDataSource.data.filter(item =>
      item.param2?.toLowerCase().includes(searchTerm)
    );
    // 步骤2：提取 param2 并去重（保留首次出现项）
    const uniqueParam2Values = Array.from(
      new Set(filtered.map(item => item.param2))
    ).filter(Boolean); // 过滤掉 null/undefined/空字符串
    return uniqueParam2Values;
  })
);

⚠️ 注意事项：

• 不要用 distinctUntilChanged()：它仅比较相邻发出值是否相等，无法解决数组内部元素去重问题；
• 避免在模板中去重：*ngFor + | async 是响应式订阅，去重逻辑必须在 Observable 流中完成，否则会引发多次渲染或状态不一致；
• 性能考量：若 tableDataSource.data 极大（如 >10,000 条），建议提前构建 param2 的唯一值索引 Map，或改用 debounceTime(300) 防抖减少计算频次；
• 空值安全：务必对 item.param2 做可选链（?.）和 filter(Boolean) 处理，防止 null/undefined 导入空白选项。

最终，