如何在Angular 5的Mat-Select Option中获取选定值的ID [英] How to get Id of selected value in Mat-Select Option in Angular 5

问题描述

如何在mat-select角度5中获取所选选项值的ID.仅在onchangeevent中获取所选选项的值.但是如何获取所选选项值的ID.

How to get the id of selected option value in mat-select angular 5. Get only value of selected option in onchangeevent. but how can get id of selected option value.

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

推荐答案

为此，您需要:

将(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>

工作演示

WORKING DEMO

这篇关于如何在Angular 5的Mat-Select Option中获取选定值的ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！