Angular Material多选下拉框无法获取当前值问题求助

在使用Angular Material的mat-select多选组件时，出现以下异常：

• 勾选选项时，打印countrySelected结果为undefined
• 取消勾选时，却能获取到之前勾选的值

对应的模板代码：

<div *ngSwitchCase="'multiselect'" [ngClass]="{'mandate': field.required}" >
  <mat-form-field appearance="outline" >
    <mat-label>{{field.placeHolder}}</mat-label>
    <mat-select [formControlName]="field.controlName"  multiple  [(ngModel)]="countrySelected" >
      <mat-option *ngFor="let option of field.options" [value]="option"
                  (onSelectionChange)="countriesUpdate($event)">
        {{option.label}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

问题原因 #

1. 混合表单绑定冲突：同时使用响应式表单的formControlName和模板驱动表单的[(ngModel)]是Angular不推荐的写法，会导致数据同步机制混乱，引发值更新延迟或异常。
2. 事件触发时机问题：onSelectionChange事件触发早于ngModel或FormControl的值更新，勾选时countrySelected还未完成同步，因此输出undefined；取消时则能拿到上一次的旧值。

解决方案 #

方案一：使用响应式表单（推荐，适配现有formControlName） #

彻底采用响应式表单方式，移除[(ngModel)]，通过FormControl直接获取或监听选中值：

修改后的模板代码

<div *ngSwitchCase="'multiselect'" [ngClass]="{'mandate': field.required}" >
  <mat-form-field appearance="outline" >
    <mat-label>{{field.placeHolder}}</mat-label>
    <mat-select [formControlName]="field.controlName" multiple>
      <mat-option *ngFor="let option of field.options" [value]="option">
        {{option.label}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

组件类代码

通过表单组获取对应FormControl，或监听值变化：

// 假设你的表单组实例为this.formGroup
ngOnInit(): void {
  // 监听选中值变化
  this.formGroup.get(field.controlName)?.valueChanges.subscribe(selectedValues => {
    console.log('当前选中值：', selectedValues);
    this.countriesUpdate(selectedValues);
  });
}

// 或在需要的时机直接获取值
getCurrentSelected(): void {
  const selectedValues = this.formGroup.get(field.controlName)?.value;
  console.log('当前选中值：', selectedValues);
}

方案二：使用模板驱动表单 #

若坚持使用ngModel，则移除formControlName，改用(ngModelChange)监听值变化：

修改后的模板代码

<div *ngSwitchCase="'multiselect'" [ngClass]="{'mandate': field.required}" >
  <mat-form-field appearance="outline" >
    <mat-label>{{field.placeHolder}}</mat-label>
    <mat-select multiple [(ngModel)]="countrySelected" (ngModelChange)="countriesUpdate($event)">
      <mat-option *ngFor="let option of field.options" [value]="option">
        {{option.label}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

组件类代码

// 初始化空数组，避免undefined
countrySelected: any[] = [];

countriesUpdate(selectedValues: any[]): void {
  console.log('当前选中值：', selectedValues);
  // selectedValues即为最新的选中项数组
}

关键注意点 #

• 多选组件的绑定值为数组类型，需确保绑定变量或FormControl的初始值是[]（空数组），而非undefined，避免初始化异常。
• 不要混合使用响应式表单和模板驱动表单的绑定方式，选择一种方式保持统一，避免数据同步问题。

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