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

Question

如何在mat-select angular中获取所选选项值的id 5.仅获取onchangeevent中所选选项的值.但是如何获得所选选项值的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

为此你需要:

更改(change)="changeClient($event)"到(change)="changeClient($event.value)"

从... [value]="client.clientName"到[value]="client.id"

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

工作演示

Answer 2

这个问题是针对Angular 5的，但是对于其他使用较新版本Angular的用户而言，该(change)事件不适用于垫选。

在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);
}

从这个答案和文档。