mat-select（多选）选中选项获取异常：formControl更新滞后问题求助

嘿，这个问题我之前踩过一模一样的坑！核心原因是你选了错误的事件监听对象——mat-option的onSelectionChange触发时机早于Angular表单控件的更新周期。当你点击选项触发这个事件时，表单控件还没来得及同步最新的选中状态，所以你打印的永远是上一次的结果。

给你两种靠谱的解决方案：

方案1：改用mat-select的selectionChange事件 #

把监听事件从单个mat-option移到整个mat-select上，mat-select的selectionChange是在所有选择操作完成、表单控件彻底更新后才触发的，能保证拿到最新的选中值。

修改后的代码如下：

HTML模板 #

<mat-select formControlName="selectme" multiple (selectionChange)="printFormControlValue()">
  <mat-option *ngFor="let opt of Options" [value]="opt">
    {{opt}}
  </mat-option>
</mat-select>

TypeScript代码（无需改动） #

printFormControlValue(){
  console.log(this.formGroup.value.selectme);
}

方案2：用表单控件的valueChanges监听（更推荐） #

如果需要更灵活的实时监听（比如不管用户是点击选项还是用键盘操作，都能响应），直接订阅表单控件的valueChanges是Angular表单的标准做法，比模板绑定事件更优雅：

TypeScript代码（在组件初始化时添加） #

ngOnInit(): void {
  // 监听selectme控件的 value 变化
  this.formGroup.get('selectme')?.valueChanges.subscribe(selectedValues => {
    console.log('最新选中的选项:', selectedValues);
  });
}

这样一来，不管用户怎么修改选中状态，你都能实时拿到最新的表单值，而且不需要在模板里绑定任何事件。

补充一句：mat-option的onSelectionChange是针对单个选项的选中/取消事件，它触发时Angular的变更检测还没走完表单值的更新流程，所以此时formControl里存的还是旧数据。而mat-select的selectionChange是整个选择集合更新完成后的事件，完全能保证拿到最新状态。

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