如何在Observable管道中为Mat-Autocomplete返回唯一值

API 探路者

2026-7-2

Angular Mat-Autocomplete 下拉选项去重实现

你当前通过formControl.valueChanges.pipe()过滤数据源，但需要在管道内添加去重逻辑，确保下拉列表只展示唯一值。以下是具体实现方案：

修改后的TS代码

this.dropdownSingleFilteredOptions = this.tableFormGroup.controls['filterParam2'].valueChanges.pipe(
  startWith(''),
  map((value: string) => {
    value = value ?? "";
    // 1. 先按输入值过滤数据源
    const filteredData = this.tableDataSource.data.filter(data => 
      data.param2.toLowerCase().includes(value.toLowerCase())
    );
    // 2. 对过滤结果按param2字段去重
    const uniqueMap = new Map();
    filteredData.forEach(item => {
      // 以param2作为唯一键，只保留第一个出现的项
      if (!uniqueMap.has(item.param2)) {
        uniqueMap.set(item.param2, item);
      }
    });
    // 将Map的值转为数组返回
    return Array.from(uniqueMap.values());
  })
);

代码说明

先执行原有过滤逻辑，筛选出包含输入关键词的项
使用Map结构实现去重：利用Map键的唯一性，以param2作为键存储数据项，重复的键会被自动忽略
最后将Map中的值转为数组，作为下拉选项的数据源

HTML代码无需改动

<mat-form-field class="filterField">
  <input formControlName="filterParam2"
         matInput
         placeholder="Filter"
         [matAutocomplete]="autoSingleSelect"
         (click)="$event.stopPropagation()"
         (keydown)="updateManualPage(1)" />
  <mat-autocomplete class="filterSelect"
                    panelClass="filterSelect"
                    #autoSingleSelect="matAutocomplete"
                    (optionSelected)="updateManualPage(1)">
    <mat-option [value]=""></mat-option>
    <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async"
                [value]="option.param2">
      {{option.param2}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>