Angular12 mat-select多选组件如何设置打开时的默认选中项

你遇到的问题核心是两点：多选FormControl初始值类型错误、默认值赋值时机不对，按以下步骤修改即可： #

1. 修正FormControl初始值 #

mat-select 多选模式下，绑定的FormControl值必须是数组类型，你现在初始化给的是空字符串，类型不匹配自然无法正常选中。
修改constructor里的初始化代码：

// 修改前
// this.applicativoDiVenditaControl = new FormControl('', Validators.required);
// 修改后
this.applicativoDiVenditaControl = new FormControl([], Validators.required);

2. 数据源加载完成后赋值默认选中项 #

必须等applicativoDiVenditaList的接口数据返回后，再给FormControl赋值要默认选中的内容，此时option已经渲染完成，可以正常匹配值。
修改getSalesApplication方法：

getSalesApplication() {
    this.productCharService.getChar('sales').subscribe(
      (data) => {
        this.applicativoDiVenditaList = data;
        // 这里填入你要默认选中的value值列表即可
        const targetValues = ['要选中的值1', '要选中的值2'];
        // 如果默认值来自传入的product参数，直接取对应字段即可，比如：
        // const targetValues = this.product.selectedSalesApps || [];
        this.applicativoDiVenditaControl.setValue(targetValues);
      },
      (error) => {
        console.log(error);
      }
    );
  }

额外说明 #

你之前测试的compareWith方案是针对option绑定对象的场景，你现在的mat-option绑定的[value]是applicativoDiVendita.value（基础类型字符串/数字），不需要额外加compareWith逻辑，只要值匹配就会自动选中。 #

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