如何通过Angular FormControl设置Select初始值？视图未同步求助

我懂你碰到的这个坑了——明明表单控件的值已经设置正确，但Mat-Select的视图就是不显示选中项对吧？这大概率是对象引用不匹配搞的鬼，毕竟你给<mat-option>绑定的[value]是整个对象，而初始化FormControl时如果用了新对象（不是animationTypes数组里的原有实例），Mat-Select就认不出来啦。

下面给你两种靠谱的解决方案：

方案一：直接引用数组内的对象实例 #

如果你的初始值是固定的，或者能直接从animationTypes里拿到对应的对象，直接用数组里的实例来初始化FormControl就行：

// 假设你用FormBuilder创建表单
import { FormBuilder, FormGroup } from '@angular/forms';

// 组件类内的代码
constructor(private fb: FormBuilder) {}

ngOnInit(): void {
  // 直接取animationTypes里的第一个对象作为初始值
  this.yourForm = this.fb.group({
    animationType: [this.animationTypes[0]]
  });
}

这种方式下，初始化的对象和选项里的对象是同一个引用，Mat-Select能立刻识别并同步视图。

方案二：用compareWith自定义对象比较逻辑 #

如果你的初始值是从后端接口获取的（没法直接引用本地数组的对象），或者必须用新对象初始化，那就给Mat-Select加个compareWith函数，告诉它怎么判断两个对象是“相等”的：

首先修改HTML模板，给<mat-select>添加[compareWith]绑定：

<mat-form-field>
  <mat-select 
    name="animationType" 
    formControlName="animationType" 
    placeholder="select animation"
    [compareWith]="compareAnimationTypes"> <!-- 新增这个属性 -->
    <mat-option *ngFor="let type of animationTypes" [value]="type">
      {{type.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

然后在组件TS文件里定义这个比较函数：

// 自定义比较逻辑：通过name属性判断两个对象是否为同一类型
compareAnimationTypes(a: {name: string}, b: {name: string}): boolean {
  // 处理null/undefined的情况，避免报错
  return a && b ? a.name === b.name : a === b;
}

这样哪怕你初始化时用的是新对象（比如{name: 'balloon'}），Mat-Select也能通过name属性匹配到对应的选项，视图就能正常显示选中状态了。

为什么会出现这个问题？ #

Mat-Select默认是通过对象引用地址来判断选中项的，当绑定的value是对象类型时，只有初始化值和选项里的对象是同一个内存引用，才会同步视图。如果两个对象内容相同但引用不同，就需要用compareWith来覆盖默认的比较逻辑。

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