Angular 角度-从HTML选择中获取项目id和值

我正在使用AngularFire和AngularFire从Firestore获取客户列表。我已经在HTML下拉列表中显示了它们

选择项目后，我希望获得client.id和client.name

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

---

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

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

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

只需在HTML文件中传递client的option值，而不是client.id

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

---

您可以将对象作为值传递，但在这种情况下使用而不是value属性，因为value只接受字符串

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

---

你想要这个吗？哇，我不知道你能做到。如何访问.ts文件中该对象的项。例如console.logthis.selectedClient.client显然不起作用，但希望强调我的point@Que在ts文件中，您可以像这样获得它。selectedClient.name和。selectedClient.id这就是我所想的，但是，当尝试控制台注销时，出现以下错误：类型“object”上不存在属性“id”。有什么想法吗？@Que:检查console.logthis.selectedClientAh，它是：Any而不是object。谢谢你，伙计。非常感谢。虽然此上下文可以回答问题，但提供有关如何和/或为什么解决问题的其他上下文将提高答案的长期价值。此方法不适用于我

selectedClient(client){
   console.log(client.id+" "client.name); 
   //here u can access client id and client name and you can do any operations required
}

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