Компонент выпадающего меню не работает в браузере Chromium

Question

У меня есть простая круговая диаграмма с выпадающим компонентом (на основе <select>), который используется для переключения данных диаграммы (я использую угловой 6). Он работает в Firefox, но когда я тестирую его на хроме, ничего не происходит (как будто пользователь вообще ничего не выбирал в выпадающем меню). Почему это происходит? Полный рабочий пример приведен здесь.

Например, в SelectComponent есть onClick метод, который испускает выбранные значения (значение из <option> элемент):

onClick(value: string): void {
  console.log(`I'm emitting ${value}`);
  this.select.emit(value);
}

и в шаблоне:

<select>
  <option
    *ngFor="let item of items"
    value="{{item.value}}"
    (click)="onClick(item.value)"
  >{{ item.label }}</option>
</select>

я добавил console.log для отладки, и обычно выводится на консоль на Firefox, но на Chromium он вообще не выводится на консоль, как если бы onClick метод никогда не вызывался.

Я также пытался onClick($event) вместо onClick(item.value), но ничего не произошло.

Кто-нибудь сталкивался с подобной проблемой, это какая-то ошибка в chartjs, или я что-то упустил?

Answer 1

Попробуйте использовать (изменить) событие для элемента select вместо (click) на опции

<select (change)="onChange($event)">
  ...

Вы можете получить доступ к текущему значению из

$event.target.value

Причина использования события change вместо события click для параметра заключается в том, что chrome не вызывает такого события в параметрах выбора, поэтому он не связан с angular.