Angular 5: как прослушать выбранную опцию из компонента?

Question

В angular у меня есть элемент select, в котором я перечисляю список объектов, как показано ниже:

<select class="m-1" (change)="valueChanged($event.target.value)">
   <option *ngFor="let item of items" [value]="item">
      {{item.name}}
   </option>
</select>

, и это соответствующий код компонента:

valueChanged(value: Item) {
    console.log('Selection Changed: ' + value.name);
}

но очень удивительно, что он регистрируется как неопределенный, тогда как при регистрации только value он печатает Selection Changed: "[object Object]"

Как я могу получить текущий выбранный объект в обработчике выбора?

Answer 1

Вы должны полностью передать объект $event в функцию (change) и получить значение из соответствующего метода.

valueChanged(value: any) {
        console.log('Selection Changed: ' + value);
}

Answer 2

Я бы рекомендовал использовать двустороннюю привязку с [(ngModel)].Вы можете отслеживать изменения выбора с помощью (ngModelChange).Чтобы использовать объекты в качестве параметров выбора, значения должны быть установлены с помощью [ngValue].

HTML:

<select class="m-1" [(ngModel)]="selectedItem" (ngModelChange)="valueChanged($event)">
   <option *ngFor="let item of items" [ngValue]="item">
      {{item.name}}
   </option>
</select>

Код:

selectedItem: Item;

valueChanged(value: Item) {
    console.log('Selection Changed', value);
}

Использование (ngModelChange) без привязки данных

Привязка событий с (ngModelChange) также может использоваться без двусторонней привязки данных, но директива ngModel должна применяться кэлемент для того, чтобы это работало:

<select class="m-1" ngModel (ngModelChange)="valueChanged($event)">
   <option *ngFor="let item of items" [ngValue]="item">
      {{item.name}}
   </option>
</select>