angular - 下拉组件在 Chromium 浏览器中不起作用

Question

我有一个带有下拉组件（基于<select>）的简单饼图，用于切换图表的数据（我使用的是角度 6）。它可以在 Firefox 中运行，但是当我在 chromium 上对其进行测试时，什么也没有发生（好像用户根本没有在下拉菜单上选择任何东西）。为什么会这样？完整的工作示例在此处的 stackblitz 上。

例如，在SelectComponent中有一个onClick方法可以发出选定的值（来自<option>元素的值）：

onClick(value: string): void {
  console.log(`I'm emitting ${value}`);
  this.select.emit(value);
}

并在模板中：

<select>
  <option
    *ngFor="let item of items"
    value="{{item.value}}"
    (click)="onClick(item.value)"
  >{{ item.label }}</option>
</select>

我已经添加console.log了调试，它通常打印到 Firefox 上的控制台，但在 Chromium 上它根本没有打印到控制台，就好像onClick从未调用过该方法一样。

我也试过onClick($event)代替onClick(item.value)，但什么也没发生。

有没有人遇到过类似的问题，这是一些chartjs错误，还是我错过了什么？

标签： angularchart.jschromiumeventemitterangular-event-emitter

Answer 1

尝试在选择元素上使用（更改）事件而不是在选项上使用（点击）

<select (change)="onChange($event)">
  ...

您可以从

$event.target.value

在选项上使用更改事件而不是单击事件的原因是 chrome 不会在选择选项上触发这样的事件 - 所以它与 angular 无关。