Question

我在html中有以下代码，

 <mat-form-field>
   <mat-select placeholder="Choose location" (change)="onChange($event)">
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.viewValue }}
    </mat-option>
   </mat-select>
  </mat-form-field>

在ts文件中，我有以下onChange函数，

public onChange(selected: any): void {
    console.log(selected.value);
    console.log(selected.viewValue);
  }

选项数组

options= [
    {value: 1, viewValue: 'ABC'},
    {value: 2, viewValue: 'XYZ'},
    {value: 3, viewValue: 'PQR'}
  ];

但是我没有在控制台中看到预期的值。当我点击ABC时，控制台上会打印以下内容，

1
未定义。

第二个控制台输出未定义。我期待第二个控制台输出为＆＃34; ABC＆＃34;即相应的viewValue。

Answer 1

您可以访问事件对象的value属性：

将您的HTML更改为：

<mat-form-field>
  <mat-select placeholder="Choose location" (change)="onChange($event)">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

你对此的看法：

public onChange(selected: any): void {
  const option = selected.value;
  console.log(option.value);
  console.log(option.viewValue);
}

在角度4选择选项

1 个答案: