Angular - получение идентификатора элемента и значения из HTML-выбора

Question

Я использую Angular и AngularFire для получения списка клиентов из Firestore.Я отобразил их в раскрывающемся списке HTML (выберите).

После выбора элемента я хотел бы получить значения client.id и client.name

.идентификатор клиента при выборе.То, что я также хотел бы получить при выборе элемента из выпадающего списка, это client.name.

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

Answer 1

Вы можете передать весь объект вместо идентификатора.

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

Тогда у вас будет доступ к обоим свойствам, client.id и client.name.

Answer 2

Вы можете передать объект как значение, но в этом случае используйте ngValue вместо свойства value, поскольку value принимает только строки.

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

Answer 3

В вашем 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
}

Answer 4

просто передайте client в значении опции вместо client.id