Angular下拉框过滤器：为“全部”选项配置空值以重置过滤

我之前也碰到过类似的困扰，其实核心是要把“全部”选项和从tasksList里提取的项目选项合并，同时调整过滤逻辑来匹配这个默认选项。下面是具体的实现步骤：

1. 构建包含“全部”的下拉选项列表 #

首先不要直接用tasksList里的项目值作为下拉选项，而是手动先添加“全部”选项，再合并去重后的项目列表。比如在你的组件类里这样处理：

// 假设你的tasksList每个元素有project字段
projectFilter: string = ''; // 默认选中“全部”
projectOptions: { value: string; label: string }[] = [];

ngOnInit() {
  // 先获取tasksList中去重的项目值
  const uniqueProjects = Array.from(new Set(this.tasksList.map(task => task.project)))
    .map(project => ({ value: project, label: project }));
  
  // 把“全部”选项放在最前面，合并到选项数组里
  this.projectOptions = [{ value: '', label: '全部' }, ...uniqueProjects];
}

2. 调整过滤逻辑 #

当选中“全部”时（也就是projectFilter为空字符串），直接返回完整的tasksList；否则过滤出匹配的项。你可以在组件里写一个过滤函数（推荐组件内处理，性能更好）：

get filteredTasksList() {
  if (!this.projectFilter) { // 匹配“全部”选项的空值
    return this.tasksList;
  }
  return this.tasksList.filter(task => task.project === this.projectFilter);
}

3. 模板里的下拉框绑定 #

确保下拉框的ngModel绑定到projectFilter，选项的value和label对应我们定义的结构：

<select [(ngModel)]="projectFilter">
  <option *ngFor="let option of projectOptions" [value]="option.value">
    {{ option.label }}
  </option>
</select>

<!-- 渲染过滤后的列表 -->
<div *ngFor="let task of filteredTasksList">
  {{ task.name }} - {{ task.project }}
</div>

这样处理后，“全部”选项会一直保留在下拉框里，切换到其他选项再切回来也不会消失，而且选中时能正确显示所有任务。

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