Блог

«Единственная опция содержит директивы события *ngFor и (click). * Цикл ngFor выполняет итерацию объекта с использованием канала keyvalue.Выпадающие параметры отображаются нормально, но это не вызывает функцию, когда я нажимаю на эти параметры в 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.
  

Используйте событие изменения вместо события щелчка и подписывайтесь на элемент выбора, а не на опцию

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

демонстрация stackblitz 🚀🚀

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

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