本文讲解如何解决 angular 应用中使用 `mat-select` 时因过滤逻辑导致下拉选项被意外截断的问题，核心是分离原始数据源与动态过滤结果，确保每次点击下拉框都能显示完整候选列表。
在基于 Angular Material 的搜索筛选功能中，一个常见但易被忽视的问题是：当用户通过 mat-select 选择某项（如职位 job）后，再次点击下拉框时，仅显示当前已过滤出的有限选项（例如仅剩 2–3 个 job），而非全部初始可选值（如原始 50+ 个 job）。这并非 ui 渲染异常，而是逻辑层的数据引用错误所致。
问题根源在于 filterUsers() 方法中的这一行：
this.originalJobSuggestions = this.jobSuggestions; // ❌ 错误：引用了已被过滤的 Set由于 this.jobSuggestions 是基于 this.filteredUsers 动态生成的（即 new Set(this.filteredUsers.map(u => u.job))），它天然只包含当前筛选结果中的 job 值。将其赋值给 originalJobSuggestions 后，原始完整列表就被覆盖丢失——后续 mat-select 展开时绑定的正是这个被“污染”的 originalJobSuggestions，自然无法回溯全量选项。
✅ 正确做法是：在每次 filterUsers() 执行时，独立、纯净地重建原始建议集，且不依赖任何过滤中间态。推荐方案如下：
private filterUsers(): void { // ✅ 步骤1：始终从完整数据源（this.users）派生原始建议，与过滤结果解耦 const fullJobSuggestions = new Set(this.users.map(u => u.job)); const fullInternalClassificationSuggestions = new Set( this.users.map(u => u.internalClassification) ); // ✅ 步骤2：执行业务过滤逻辑 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) ); }); // ✅ 步骤3：基于 filteredUsers 生成当前有效选项（用于下拉展示 & 搜索建议） this.jobSuggestions = new Set(this.filteredUsers.map(u => u.job)); this.internalClassificationSuggestions = new Set( this.filteredUsers.map(u => u.internalClassification) ); this.nameSuggestions = new Set([ ...this.filteredUsers.map(u => u.firstname), ...this.filteredUsers.map(u => u.lastname) ]); // ✅ 步骤4：将原始完整建议集安全赋值给 originalXXX 字段（供 reset 逻辑或初始渲染使用） this.originalJobSuggestions = fullJobSuggestions; this.originalInternalClassificationSuggestions = fullInternalClassificationSuggestions; this.submitUsers.emit(this.filteredUsers); }? 关键注意事项：
- originalJobSuggestions 必须始终源自 this.users（即未经过滤的全量数据），而非 this.filteredUsers 或 this.jobSuggestions；
- 若存在“重置筛选”按钮（如
– ），其内部应调用 this.job.setValue(NULL) 并触发 filterUsers()，从而自动恢复 jobSuggestions 为全量子集，同时 originalJobSuggestions 保持不变； - Set 是引用类型，直接赋值 this.originalJobSuggestions = this.jobSuggestions 会导致两者指向同一对象——务必使用 new Set(…) 显式创建新实例；
- 在模板中，确保 mat-select 的选项循环绑定的是 jobSuggestions（动态过滤结果），而“全部清空”选项的逻辑应独立触发重置，不干扰原始数据源。
通过该设计，mat-select 的展开行为回归预期：首次加载显示全部 job，筛选后显示匹配 job，点击重置后再次展开仍能呈现完整列表——既保障用户体验，又维持逻辑清晰性与可维护性。