Angular (Click) не работает в Chrome при использовании Select Option

Question

Я создал выпадающий список, который отлично работал на Firefox. Я думал, что моя работа была закончена, когда кто-то попробовал это на Chrome. По какой-то причине функция (щелчка) никогда не вызывается

<select name="cars" id="car" title="cars" placeholder="select">
                        <option [value]="null" (click)="onCancelSelect(car);">Select</option>
                        <option *ngFor="let car of cars" (click)="onSelect(car);" [value]="car.id"> 
                            {{car.name}}
                        </option>
</select>

Я попытался переместить (щелкнуть) функцию в теге select. На этот раз функция вызывается, но машина "не определена". Что я могу сделать ?

Answer 1

Используйте (change) вместо (click) над "select"

<select name="cars" id="car" (change)="onSelect($event.target.value);" title="cars" placeholder="select">
    <option [value]="0">Select</option>
    <option *ngFor="let car of cars" [value]="car.id"> 
        {{car.name}}
    </option>
</select>


onSelect(id) {
  console.log(`car id: `, id);
  console.log(`car`, id ? this.cars.find(c => c.id == id): "None")
}

См. Пример здесь: https://stackblitz.com/edit/angular-5uinkm