Одной из распространенных задач при работе с фреймворком 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 попадает полный объект, что позволяет работать с ним непосредственно, без необходимости производить дополнительные действия для получения объекта по его идентификатору.
Добавить комментарий