如何以编程方式设置<mat-select>的值？视图未同步问题排查

兄弟，我太懂这种“控件值明明对了但视图就是空着”的憋屈了！你遇到的这个问题，本质是Angular Material的mat-select默认是通过对象引用来匹配选中项的——哪怕你赋值的对象和下拉选项里的对象属性完全一致，但只要不是同一个内存引用，mat-select就认不出来它是已选中的选项，导致视图显示为空，但表单控件的value其实是对的。

下面给你两个最常用的解决方案，结合你的代码场景来用：

方案一：使用compareWith函数（推荐） #

这个方法能告诉mat-select怎么判断两个对象是“相等”的，不用依赖对象引用。

步骤1：在组件类里定义比较函数 #

比如你的category对象有个id属性，就用id来判断相等：

// 组件类里的代码
compareCategory(c1: any, c2: any): boolean {
  return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

步骤2：在HTML的mat-select上绑定这个函数 #

修改你的<mat-select>标签，加上[compareWith]属性：

<mat-select formControlName="category" [compareWith]="compareCategory">
  <mat-option *ngFor="let category of categories" [value]="category">
    {{ category.name }}
  </mat-option>
</mat-select>

这样不管你赋值的category对象是不是和选项数组里的同一个引用，只要id匹配，mat-select就能正确显示选中状态。

方案二：确保赋值的对象是选项数组中的元素 #

如果你不想用compareWith，那赋值的时候别自己新建对象，直接从下拉选项的数组里找到对应的元素赋值：

// 假设你有一个categories数组存所有选项
const targetCategory = this.categories.find(cat => cat.id === 你要赋值的id);
this.productForm.controls['category'].setValue(targetCategory);

这样赋值的对象和选项里的是同一个引用，mat-select就能正常识别并显示了。

排查小技巧 #

你可以先console.log一下赋值的对象和选项数组里的对应对象，看看它们的===结果是不是true：

console.log(targetCategory === this.categories[某索引]);

如果是false，那就是引用不同的问题，用上面的方案一或二解决就好。

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