Angular Material mat-select多选ngModel选中值不持久化问题

你的问题核心在于绑定值类型不匹配：mat-option的[value]绑定的是location.id（数字类型），但locationNameSelectedItems是包含对象的数组，两者类型不一致，导致UI无法识别选中项。以下是两种可行的解决方法：

方法一：将选中值转换为ID数组 #

保持模板不变，在组件中把locationNameSelectedItems转换为ID数组，与mat-option的value类型对齐：

组件代码调整 #

// 假设从接口/数据源获取的原始选中数据为originSelectedData
this.locationNameSelectedItems = originSelectedData.map(item => item.id);

模板保持原结构 #

<mat-form-field>
  <mat-select [(ngModel)]="locationNameSelectedItems" formControlName="locationName" multiple>
    <mat-option *ngFor="let location of locationNameDropdownList" [value]="location.id">{{location.itemName}}</mat-option>
  </mat-select>
</mat-form-field>

方法二：绑定整个对象作为选项值 #

将mat-option的value绑定为完整的location对象，与locationNameSelectedItems的对象数组结构匹配：

模板调整 #

<mat-form-field>
  <mat-select [(ngModel)]="locationNameSelectedItems" formControlName="locationName" multiple [compareWith]="compareLocations">
    <mat-option *ngFor="let location of locationNameDropdownList" [value]="location">{{location.itemName}}</mat-option>
  </mat-select>
</mat-form-field>

组件补充比较函数（可选但推荐） #

如果选中对象与下拉列表中的对象是不同引用（仅属性相同），需要添加自定义比较函数来识别匹配项：

compareLocations(obj1: any, obj2: any): boolean {
  // 通过id属性判断两个对象是否为同一选项
  return obj1 && obj2 ? obj1.id === obj2.id : obj1 === obj2;
}

额外注意事项 #

同时使用[(ngModel)]和formControlName时，需确保表单组中对应的控件初始值类型与选中值一致：

// 组件中的表单初始化示例
this.myForm = this.formBuilder.group({
  locationName: [[]] // 初始值为数组，匹配多选场景的类型
});

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