Angular Material多选下拉框：已获响应但选中值未在UI显示

核心问题 #

1. formControl与双向绑定value冲突：同时给mat-select绑定[formControl]="groups"和[(value)]="selectedGroups"会导致组件状态混乱——formControl会接管值的管理，双向绑定的value无法同步更新UI。
2. 未正确初始化选中值：获取到GroupId数组后，没有将值同步到formControl或selectedGroups，导致UI不知道哪些选项需要选中。

修复步骤 #

1. 简化HTML模板，移除冲突绑定

去掉[(value)]，让formControl完全管理选中状态：

<mat-form-field appearance="outline">
  <mat-select [formControl]="groups" multiple>
    <mat-option 
      *ngFor="let Group of Groups; let i = index" 
      [value]="Group.value" 
      color="primary-50"
    >
      {{Group.label}}
    </mat-option>
  </mat-select>
</mat-form-field>

2. 正确初始化并同步选中值

在获取到响应数据后，直接给formControl赋值，UI会自动渲染选中项：

import { FormControl } from '@angular/forms';

// 组件类内初始化formControl
groups = new FormControl([]);
selectedGroups: string[] = [];

// 假设你在请求回调中拿到GroupId数据
const responseGroupIds = ["a11_a1_41237_4560", "test_g1234_41237_4560"];

// 同步到formControl，触发UI更新
this.groups.setValue(responseGroupIds);
// 如果需要保留selectedGroups变量，同步即可
this.selectedGroups = [...responseGroupIds];

3. 可选：简化选中事件逻辑（如果需要保留）

如果必须保留onSelectionChange处理额外逻辑，不用手动维护数组，直接用formControl的value：

onSelectGroup(event: {
  isUserInput: boolean;
  source: { value: any; selected: boolean };
}) {
  if (event.isUserInput) {
    // 直接从formControl获取最新选中值
    this.selectedGroups = [...this.groups.value];
    // 在这里添加你的额外业务逻辑
    console.log(`选项${event.source.selected ? '选中' : '取消选中'}:`, event.source.value);
  }
}

修复原因 #

• Angular Material的mat-select绑定formControl后，会自动同步选中状态与formControl的值，无需手动维护数组。
• 同时使用formControl和value绑定会导致双向数据冲突，UI无法正确感知选中状态。
• 直接给formControl赋值是最可靠的更新UI选中状态的方式，避免手动操作数组可能出现的同步错误。

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