Привязка элемента select к объекту в Angular

Одной из распространенных задач при работе с фреймворком Angular является привязка элемента select к массиву объектов. Это легко осуществить, но возникают сложности, когда необходимо привязать значение выбранного элемента не к его идентификатору, а к самому объекту.

Рассмотрим пример. Имеется массив объектов, каждый из которых представляет страну с уникальным идентификатором и названием. В некоторых случаях, при выборе страны из выпадающего списка, хотелось бы получить не просто идентификатор выбранной страны, а полный объект.

@Component({
   selector: 'myApp',
   template: 
      `<h1>My Application</h1>
       <select [(ngModel)]="selectedValue">
          <option *ngFor="let c of countries" [value]="c.id">{{c.name}}</option>
       </select>`
    })
export class AppComponent{
   countries = [
      {id: 1, name: "United States"},
      {id: 2, name: "Australia"},
      {id: 3, name: "Canada"},
      {id: 4, name: "Brazil"},
      {id: 5, name: "England"}
   ];
   selectedValue = null;
}

В приведенном примере значение выбранного элемента привязано к его идентификатору. Если же попытаться изменить значение выбранного элемента на сам объект, то Angular не сможет корректно обработать это изменение.

<option *ngFor="let c of countries" [value]="c">{{c.name}}</option>

В таком случае Angular вставляет в selectedValue объект, но не тот, который ожидался. Причина этого заключается в том, что Angular при привязке к значению использует строковое представление объекта, а не сам объект.

Возможным решением может быть использование привязки к событию изменения (change), но это не всегда является оптимальным решением, так как событие (change) срабатывает до обновления привязанного ngModel, и в этот момент новое выбранное значение еще не доступно.

Однако в Angular есть решение этой проблемы. Вместо использования атрибута value можно использовать [ngValue]. Этот атрибут позволяет привязать к значению элемента select любой объект.

<option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>

Теперь при выборе элемента из списка в selectedValue попадает полный объект, что позволяет работать с ним непосредственно, без необходимости производить дополнительные действия для получения объекта по его идентификатору.