Функция события клика не работает на Chrome

Question

"Одиночный параметр содержит директивы событий * ngFor и (click). * Цикл ngFor выполняет итерации объекта, используя значение ключа pipe. Параметры dropdown показываются нормально, но не вызывают функцию, когда я нажимаю эти параметры в Chrome, но работают в Firefox..

  subjects = {
    'cse': 'Computer Science',
    'eee': 'electrical and electronics engineering',
  };

  getSub(sub) {
     console.log(sub);
  }

<select>
   <option *ngFor="let item of subjects | keyvalue" (click)="getSub(item.key)">{{item.value}}</option>
</select>


Expected: I just expect to execute the getSub() function.

Answer 1

Используйте событие change вместо события click и подпишитесь на элемент select, а не на опцию

<select (change)="getSub($event.target.value)">
   <option>Not Selected</option>
   <option *ngFor="let item of subjects | keyvalue" [value]="item.key" >
     {{item.value}}
   </option>
</select>

демонстрация стекаблиц ??

Answer 2

Похоже, вы забыли свои закрывающие кавычки после * ngFor и до вашего (click) атрибута события.

<select>
    <option *ngFor="let item of subjects | keyvalue" (click)="getSub(item.key)">{{item.value}}</option>
</select>