调用setValue后mat-select组件选中值未更新问题求助

mat-select默认的选中值匹配逻辑为：必须存在绑定了相同value值的mat-option才会展示对应选中状态，你输入的新值不在原有items生成的mat-option的value列表里，同时放置输入框的mat-option没有绑定动态value，所以视图层无法匹配到可展示的选项，哪怕表单值更新成功，展示依然为空。

方案1：给自定义输入的mat-option绑定动态value（改动最小，最推荐） #

只需要给放置输入框的mat-option加上[value]绑定，直接关联表单当前值即可，输入的新值会自动和该option的value匹配：

<mat-select [formControl]="form">
  <mat-option *ngFor="let item of items" [value]="item">....</mat-option>
  <!-- 给自定义输入的option绑定动态value，和表单值同步 -->
  <mat-option [value]="form.value">
    <input (keyup)="updateForm($event.target.value)" />
  </mat-option>
</mat-select>

原有ts逻辑无需修改，setValue后表单值更新，该option的value会同步更新，mat-select就能匹配到对应选项，正常展示选中值。

方案2：用临时合并数组适配多场景 #

如果需要让用户输入的新值也能出现在下拉选项列表里，又不想污染原items数组，可以用计算属性返回合并后的数组，原数组保持纯净：

// 原items数组保持不变
items: any[] = [];
form = new FormControl()

// 新增计算属性，动态合并原数组和当前表单值
get mergedItems() {
  const currentVal = this.form.value;
  // 去重后返回，避免出现重复选项
  return currentVal && !this.items.includes(currentVal) 
    ? [...this.items, currentVal] 
    : this.items;
}

updateForm(value) { 
  this.form.setValue(value)
}

对应html里的遍历逻辑修改为遍历合并后的数组：

<mat-option *ngFor="let item of mergedItems" [value]="item">....</mat-option>

如果你的items里存储的是对象类型而非字符串/数字等基础类型，需要额外给mat-select添加[compareWith]属性自定义匹配规则，避免因为对象引用不同导致匹配失败：

<mat-select [formControl]="form" [compareWith]="compareFn">

compareFn(o1: any, o2: any) {
  // 用对象的唯一标识字段匹配，比如id
  return o1 && o2 ? o1.id === o2.id : o1 === o2;
}

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