Angular Material自动完成过滤后无法显示选中状态问题求助

问题根源 #

当使用可观察对象过滤选项数组时，每次过滤都会生成新的对象实例，Angular Material默认通过对象引用判断选项是否选中，导致控件无法识别过滤后的选项与已选中值是同一个实体，因此不会添加mdc-list-item--selected类和复选标记。

解决方案 #

通过compareWith指令自定义选中匹配规则，基于对象的唯一标识（而非引用）判断选中状态：

1. 在组件类中定义比较函数
   假设你的选项对象包含唯一标识字段（比如code），添加以下函数：

compareStates(state1: any, state2: any): boolean {
  // 根据实际唯一字段调整，比如id、code等
  return state1 && state2 ? state1.code === state2.code : state1 === state2;
}

2. 在mat-autocomplete上绑定compareWith
   将比较函数绑定到autocomplete控件，替换默认的引用匹配逻辑：

<mat-autocomplete #auto="matAutocomplete" [compareWith]="compareStates">
  <mat-optgroup *ngFor="let group of filteredGroups | async" [label]="group.name">
    <mat-option *ngFor="let state of group.states" [value]="state">
      {{ state.name }}
    </mat-option>
  </mat-optgroup>
</mat-autocomplete>

额外注意事项 #

• 确保过滤逻辑不会修改选项对象的唯一标识字段，保持前后一致性；
• 如果绑定的value是原始类型（如字符串、数字），则无需此配置，但对象类型必须使用compareWith。

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