Angular中FormControl无法为多选mat-select回填值问题

看起来你遇到的问题在Angular的mat-select多选场景里很常见，主要有两个核心原因：FormControl初始值类型错误和对象引用不匹配，咱们一步步来解决：

1. 修正多选FormControl的初始值 #

你的usersOrdering FormControl初始值设为空字符串''，但多选控件的FormControl应该绑定数组类型的初始值，空数组才是正确的选择：

orderForm: FormGroup = new FormGroup({
  food: new FormControl('', [Validators.required]),
  usersOrdering: new FormControl([], [Validators.required]) // 改成空数组
});

2. 解决对象引用不匹配问题 #

mat-select默认用对象引用来判断选项是否选中，但你从getOrder获取的order.usersOrdering里的User对象，和filteredUsers里的User对象大概率是不同的实例（即使属性完全一样），这就导致控件无法匹配到选中项。

解决这个问题需要给mat-select添加compareWith函数，用对象的唯一标识（比如id）来比较：

第一步：在模板中添加compareWith绑定 #

假设你的mat-select模板是这样的，加上[compareWith]="compareUsers"：

<mat-select 
  multiple 
  formControlName="usersOrdering" 
  [compareWith]="compareUsers"
>
  <mat-option *ngFor="let user of filteredUsers" [value]="user">
    {{ user.name }} <!-- 替换成你的User对象显示字段 -->
  </mat-option>
</mat-select>

第二步：在组件类中定义compareUsers函数 #

// 组件类里添加这个函数
compareUsers(user1: User, user2: User): boolean {
  // 用User对象的唯一id来判断是否为同一个用户
  return user1 && user2 ? user1.id === user2.id : user1 === user2;
}

3. 确保选项数据在回填前加载完成 #

你当前在ngOnInit里同时调用了getOrder和filterUsers，但这两个都是异步请求，可能出现filteredUsers还没加载完成就执行了patchValue的情况，导致选项还没渲染，选中值自然不显示。

可以用forkJoin合并两个请求，确保数据都加载完成后再回填：

import { forkJoin } from 'rxjs'; // 记得导入forkJoin

// 修改getOrder方法
getOrder(id: number) {
  forkJoin([
    this.ordersService.getOrder(id),
    this.ordersService.filterUsers(id)
  ]).subscribe(([orderData, usersData]) => {
    this.filteredUsers = usersData; // 先加载选项数据
    this.order = orderData;
    this.displayOrder(this.order); // 再回填选中值
  });
}

做完这些修改后，你的多选mat-select应该就能正确显示预选中的值了。可以在displayOrder里打印this.order.usersOrdering和this.filteredUsers，确认数据格式和id匹配情况，排查是否还有其他问题。

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