angular - 如何在 Angular 5 的 Mat-Select 选项中获取所选值的 ID

Question

How to get the id of selected option value in mat-select angular 5. 在onchangevent中只获取所选选项的值。但是如何获取所选选项值的 ID。

 client.component.html
<mat-form-field>
    <mat-select placeholder="Client*" #clientValue  (change)="changeClient($event)">
    <mat-option  *ngFor="let client of clientDetails"   [value]="client.clientName">
      {{client.clientName |  json}}
    </mat-option>
  </mat-select>
</mat-form-field>

client.component.ts file
export class Client{
     changeClient(event){
     console.log(event);
 }
}

Answer 1

这个问题是针对 Angular 5 的，但对于其他使用较新版本的 Angular 来到这里的人来说，(change) 事件不适用于 mat-select。

在 Angular 6 中，(change) 事件已更改为 (selectionChange)。

那就是:

<mat-form-field>
    <mat-select placeholder="Client*" #clientValue  (selectionChange)="changeClient($event.value)">
    <mat-option  *ngFor="let client of clientDetails" [value]="client.id">
      {{client.clientName}}
    </mat-option>
  </mat-select>
</mat-form-field>

在组件中:

changeClient(value) {
    console.log(value);
}

来自 this answer和 the documentation .