使用 ngModel 和 ngModelChange 从多选中获取值不起作用答案

【问题标题】：Getting the values from a multi select with ngModel and ngModelChange not working使用 ngModel 和 ngModelChange 从多选中获取值不起作用
【发布时间】：2020-12-17 18:45:26
【问题描述】：

我正试图围绕 ngModel ngModelChange。多选返回一个我想连接成单个字符串的选择数组。我似乎无法从多选中获取值。 mobileChange() 函数返回内部未定义的数组，该数组等于选择的数量。即 ['undefined', 'undefined'] 如果选择了两个选项。

如何获取值？

模板 HTML

<mat-form-field>
  <mat-label>Mobile Access Type</mat-label>
  <mat-select id="mobileAccessType" [(ngModel)]="tempMobile" (ngModelChange)="mobileChange()" required multiple>
    <mat-option ngDefaultControl *ngFor="let option of mobileAccessTypes"  >{{option.value}}</mat-option>
  </mat-select>
</mat-form-field>

组件 TS

  public tempMobile = ['stuff'];

  public mobileChange(): void {
      console.log('CHANGES', this.tempMobile);
  }

【问题讨论】：

标签： angular typescript angular-material ngmodel angular-ngmodelchange

【解决方案1】：

在您的 mobileChange 函数中，您应该将 $event 作为参数发送：

(ngModelChange)="mobileChange($event)"

然后在您的 TS 中获得值

public mobileChange(e): void {
    this.tempMobile.push(e.toString());
}

https://stackblitz.com/edit/angular-ngmodelchange-pau?file=app/app.component.ts

【讨论】：