Angular Mat AutoComplete编程设置选中值时，选中项不显示mat-pseudo-checkbox

核心原因 #

当通过编程方式设置表单控件值时，如果选项是对象类型，Angular Material无法默认判断控件值与选项是否匹配（因为对象引用不同），导致MatOption的选中状态未同步，所以不显示对勾。

解决方案 #

1. 使用compareWith函数（推荐） #

在mat-autocomplete上绑定compareWith函数，自定义值匹配逻辑，无需依赖对象引用一致。

实现步骤：

• 在组件类中定义对比函数：

compareOptionValues(option1: any, option2: any): boolean {
  // 根据实际业务的唯一标识判断，比如id字段
  return option1 && option2 ? option1.id === option2.id : option1 === option2;
}

• 在模板的mat-autocomplete上绑定该函数：

<mat-autocomplete #auto="matAutocomplete" [compareWith]="compareOptionValues">
  <!-- 你的选项组和选项代码 -->
</mat-autocomplete>

2. 确保选中值与选项引用一致 #

如果不使用compareWith，需要保证编程设置的控件值是选项数组中同一个对象引用，而非新创建的对象。

示例代码：

// 假设options是你的选项数据源数组
const targetOption = this.options.find(opt => opt.id === 目标ID);
this.formControl.setValue(targetOption);

3. 手动同步MatOption选中状态（临时方案） #

如果上述方法不适用，可以手动遍历选项并设置selected属性，但这种方式容易出现状态不一致，不推荐长期使用：

// 注入所有MatOption实例
@ViewChildren(MatOption) optionList!: QueryList<MatOption>;

setTargetOption(targetValue: any) {
  this.formControl.setValue(targetValue);
  // 遍历更新选中状态
  this.optionList.forEach(opt => {
    opt.selected = this.compareOptionValues(opt.value, targetValue);
  });
}

验证要点 #

• 确认表单控件的值已正确设置（可通过console.log(this.formControl.value)验证）
• 确保compareWith函数的逻辑符合业务场景，比如使用唯一标识字段做对比
• 检查选项的[value]属性是否正确绑定了对应的数据对象

内容的提问来源于stack exchange，提问作者Anil Kumar Reddy A