Angular应用Material select控件默认值无法高亮为选中状态问题

问题根因 #

无法触发默认选中蓝色高亮的核心原因有两个：

1. mat-option的[value]绑定逻辑错误：你当前绑定的是item.isDefault布尔值，所有默认选项的value都为true，不符合下拉选的取值逻辑，mat-select无法正确匹配对应选项
2. 未给响应式表单控件赋值：mat-select的选中状态完全和绑定的formControl值同步，不会自动识别option上的isDefault属性触发选中

修复步骤 #

1. 调整模板中mat-option的value绑定，改为你实际需要提交的字段（示例用item.name，也可以替换为item.id等唯一标识）
2. 在TS代码中初始化表单时，先从选项列表中找到isDefault = true的选项，将其对应的值赋值给绑定的formControl即可

修改后代码参考 #

模板代码

<mat-form-field [floatLabel]="'never'">
  <mat-select placeholder="select" formControlName="name">
    <mat-option value="">-- Select an option --</mat-option>
    <mat-option 
      *ngFor="let item of nameOptions$ | async" 
      [ngClass]="{'checkmark': item.isDefault}"
      [value]="item.name"
    >
      {{item.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

业务逻辑代码

// 表单初始化后，获取选项列表找到默认项赋值
this.nameOptions$.pipe(take(1)).subscribe(options => {
  const defaultOption = options.find(item => item.isDefault);
  if (defaultOption) {
    this.yourFormGroup.get('name')?.setValue(defaultOption.name);
  }
})

补充说明 #

如果你需要将整个item对象作为value绑定，需要额外添加compareWith匹配函数，避免对象引用不同导致选中状态无法识别：

1. 模板中给mat-select添加绑定：<mat-select [compareWith]="compareFn" ...>
2. TS中添加对比函数：

compareFn(o1: any, o2: any): boolean {
  return o1 && o2 ? o1.id === o2.id : o1 === o2;
}

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