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

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

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

Answer 2

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

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

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

Answer 3

只需通过client值而不是client.id

Answer 4

在您的HTML文件中

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

在你的ts文件中

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