Question

“单个选项包含* ngFor和（单击）事件指令。* ngFor循环使用键值管道迭代对象。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

好像您忘记了* ngFor之后和（click）事件属性之前的右引号。

libraryDependencies ++= Seq(
  guice,
  ws,
  "com.typesafe.play" %% "play-slick" % "4.0.0",
  "com.typesafe.play" %% "play-slick-evolutions" % "4.0.0",
  "com.h2database" % "h2" % "1.4.197",
  specs2 % Test
)

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 demo

点击事件功能不适用于Chrome

2 个答案: