單擊事件功能在 chrome 上不起作用

Question

“單個選項包含 *ngFor 和 (click) 事件指令。*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

看起來您忘記了在 *ngFor 之后和（單擊）事件屬性之前的結束引號。

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

Answer 2

使用更改事件而不是單擊事件並訂閱選擇元素而不是選項

<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 演示 🚀🚀