Angular - 从 HTML 选择中获取项目 ID 和值

Question

我正在使用 Angular 和 AngularFire 从 Firestore 获取客户端列表。我已将它们显示在 HTML 下拉列表中(选择)。

选择一个项目后，我想获得 client.id 和 client.name

到目前为止，这能够让我在选择时获得客户端 ID。从下拉列表中选择一个项目后，我还想得到的是 client.name。

<select [(ngModel)]="selectedClient">
   <option *ngFor="let client of clients | async" [value]="client.id"> 
        {{ client.name}} 
   </option>
</select>

Answer 1

您可以传入整个对象而不仅仅是 id。

<select [(ngModel)]="selectedClient">
   <option *ngFor="let client of clients | async" [ngValue]="client"> 
        {{ client.name}} 
   </option>
</select>

然后您将可以访问这两个属性，client.id 和 client.name。