Angular 5：解决select标签Pipe过滤重复选项及默认值设置问题

看起来你遇到了两个常见的Angular表单小问题：select选项重复显示，以及需要设置默认选中值。别担心，咱们一步步来搞定：

1. 先解决重复选项问题：生成唯一选项列表 #

问题根源是你直接从原始数据列表生成select选项，没有做去重处理。咱们可以利用Set数据结构自动去重的特性，在组件里生成一个唯一的选项列表。

组件代码修改 #

假设你的数据列表是items，每个项里用来分类的字段是category（你可以换成自己实际使用的字段名），在组件类里添加一个获取唯一分类的getter属性：

// app.component.ts
export class AppComponent {
  items: any[] = []; // 你的原始数据列表
  selectedCategory: string = ''; // 用于双向绑定的选中值

  // 获取去重后的分类列表
  get uniqueCategories(): string[] {
    // 先提取所有分类值，转成Set去重，最后转回数组
    return Array.from(new Set(this.items.map(item => item.category)));
  }

  // 你的新增项方法（示例）
  addNewItem(newItem: any) {
    this.items.push(newItem);
    // 新增后uniqueCategories会自动更新，因为getter会重新计算
  }
}

模板代码修改 #

把原来遍历原始列表的select，改成遍历咱们刚生成的uniqueCategories：

<!-- app.component.html -->
<select [(ngModel)]="selectedCategory">
  <!-- 可选：添加一个默认提示选项 -->
  <option value="">请选择分类</option>
  <!-- 遍历去重后的分类 -->
  <option *ngFor="let category of uniqueCategories" [value]="category">
    {{ category }}
  </option>
</select>

这样不管你新增多少带有重复分类的项，select里只会显示每个分类一次。

2. 设置默认选中值 #

设置默认值有几种常见场景，你可以根据需求选择：

场景1：默认选中第一个分类 #

如果希望页面加载时自动选中第一个分类，在组件的ngOnInit里初始化：

ngOnInit() {
  // 确保数据加载完成后再赋值，避免空数组报错
  if (this.uniqueCategories.length > 0) {
    this.selectedCategory = this.uniqueCategories[0];
  }
}

场景2：默认选中特定固定值 #

如果要默认选中某个固定分类（比如"未分类"），直接初始化即可：

selectedCategory: string = '未分类';

场景3：默认显示提示选项 #

如果希望默认显示"请选择分类"这类提示，就把selectedCategory初始化为空字符串，对应模板里的<option value="">请选择分类</option>。

3. 配合Pipe过滤列表 #

你的过滤Pipe可以直接使用selectedCategory作为过滤条件，比如假设你的Pipe是这样的：

// filter.pipe.ts
@Pipe({ name: 'categoryFilter' })
export class CategoryFilterPipe implements PipeTransform {
  transform(items: any[], selectedCategory: string): any[] {
    if (!selectedCategory) return items; // 选中空值时显示所有项
    return items.filter(item => item.category === selectedCategory);
  }
}

模板里的*ngFor就可以这样写：

<div *ngFor="let item of items | categoryFilter: selectedCategory">
  <!-- 你的列表项内容 -->
</div>

这样当你切换select选项时，列表会自动过滤，新增项后select选项也不会重复啦！

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