Angular Material mat-chip编辑场景下无法正常显示选中值问题求助

问题原因 #

1. 表单绑定冲突：mat-select同时绑定了响应式表单的formControl和模板驱动的ngModel，两套表单逻辑互相冲突，导致控件内部值同步异常。
2. 对象引用不匹配：mat-option绑定的value是完整的theme对象，Angular默认按内存引用匹配选中项，编辑页回显时你给formControl赋值的对象，和themeList里的对应对象不是同一个引用，导致控件无法识别已选中状态，mat-select-trigger内的内容无法正常渲染。

解决步骤 #

1. 清理冗余绑定 #

删除mat-select上的[(ngModel)]="selectedTheme"和ngDefaultControl属性，使用响应式表单时仅保留[formControl]="theme"即可。
修改后的mat-select标签示例：

<mat-select aria-owns="theme" placeholder="Select theme" aria-label="Select theme" name="activityTheme" [formControl]="theme" multiple (selectionChange)="onThemeChange($event)" [compareWith]="compareThemeFn">

2. 添加对象比较函数 #

在TS文件中添加compareWith匹配函数，按对象的唯一标识（此处用theme字段，如有id优先用id）匹配选中项，替换默认的引用匹配逻辑：

compareThemeFn(option: any, selectedValue: any): boolean {
  return option && selectedValue ? option.theme === selectedValue.theme : option === selectedValue;
}

3. 检查赋值时序 #

确保编辑页给theme表单控件赋值的操作，是在themeList数据加载完成之后执行，避免先赋值选中值再加载选项列表导致匹配失败。

完成以上修改后，mat-chip即可正常回显选中值。

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