javascript - 点击事件功能在chrome上不起作用

Question

“单个选项包含 *ngFor 和(单击)事件指令。*ngFor 循环使用键值管道迭代对象。下拉选项显示正常，但当我在 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元素而不是option

<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 demo 🚀🚀