如何重置 Angular 中 mat-select 的下拉选项列表

在 angular 应用中使用 `mat-select` 实现搜索筛选时，若多次触发 `filterusers()` 导致 `jobsuggestions` 被覆盖为过滤后子集，则下拉列表仅显示已选/匹配项，丢失原始全量选项。本文提供基于不可变副本的可靠重置方案。

问题本质在于：filterUsers() 方法中执行了 this.originalJobSuggestions = this.jobSuggestions;，而 this.jobSuggestions 本身是动态计算出的当前过滤结果的去重集合（new Set(this.filteredUsers.map(u => u.job))）。这导致 originalJobSuggestions 不再代表“所有初始岗位”，而是随每次过滤不断收缩，最终下拉框只能显示历史选中或当前匹配的有限岗位。

✅ 正确做法是：始终从原始完整数据源派生 originalJobSuggestions，而非从已被过滤的中间状态赋值。修改 filterUsers() 如下：

private filterUsers(): void {   // ✅ 关键修复：从 this.users（原始未过滤全量用户）生成原始建议集   const originalJobSuggestions = new Set(this.users.map(u => u.job));   const originalInternalClassificationSuggestions = new Set(     this.users.map(u => u.internalClassification)   );    this.filteredUsers = this.users.filter(u => {     return (       includeQuery(u.job, this.searchForm.controls.hiddenFilters.controls.job.value) &&       includeQuery(u.internalClassification, this.searchForm.controls.hiddenFilters.controls.internalClassification.value) &&       this.filterByPerson(u) &&       this.filterByAdminStructure(u)     );   });    // ✅ jobSuggestions 基于 filteredUsers（当前筛选结果）   this.jobSuggestions = new Set(this.filteredUsers.map(u => u.job));   // ✅ originalJobSuggestions 始终保持为全量初始集合   this.originalJobSuggestions = originalJobSuggestions;    this.internalClassificationSuggestions = new Set(     this.filteredUsers.map(u => u.internalClassification)   );   this.originalInternalClassificationSuggestions = originalInternalClassificationSuggestions;    this.nameSuggestions = new Set([     ...this.filteredUsers.map(u => u.firstname),     ...this.filteredUsers.map(u => u.lastname)   ]);    this.submitUsers.emit(this.filteredUsers); }

同时，请确保模板中 mat-select 的选项来源正确绑定到 originalJobSuggestions（而非 jobSuggestions）以展示完整列表 —— 但注意：实际可选值仍应为 jobSuggestions（即当前筛选上下文下的有效选项），而“重置”功能（如 – 选项）应清空该字段并恢复原始全量建议。因此，在 resetHiddenFilter(‘job’) 方法中需显式重置：

resetHiddenFilter(filterName: 'job' | 'internalClassification'): void {   this.searchForm.controls.hiddenFilters.controls[filterName].reset();   // ✅ 触发重新过滤，从而重建 jobSuggestions 并保留 originalJobSuggestions 不变   this.filterUsers(); }

? 额外建议：

• 将 originalJobSuggestions 声明为 readonly 或通过 getter 封装，避免意外修改；
• 若 this.users 数据量大，考虑在 ngonInit 中一次性缓存 originalJobSuggestions，而非每次 filterUsers() 都重建（前提是 this.users 不会动态变更）；
• 使用 Array.from(set) 转换为数组供模板遍历，例如 。

通过分离「原始数据源」与「当前筛选视图」，你既能保证下拉列表始终具备完整可选项，又能精准响应业务筛选逻辑，彻底解决 mat-select 列表无法重置的常见陷阱。