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

Question

我有一个简单的饼图，带有一个下拉组件(基于<select>(，用于切换图表的数据(我使用的是角度6(。它可以在 Firefox 中工作，但是当我在 chromium 上测试它时没有任何反应(好像用户根本没有在下拉菜单中选择任何内容(。为什么会这样？完整的工作示例在这里的堆栈闪电战中。

例如，在 SelectComponent 中，有发出所选值(来自 <option> 元素的值(的 onClick 方法：

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 错误，还是我错过了什么？

Answer 1

尝试在选择元素上使用 (change( 事件，而不是 (单击( on 选项

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

您可以从以下位置访问当前值

$event.target.value

使用更改事件而不是单击事件选项的原因是 chrome 不会在选择选项上触发此类事件 - 因此它与角度无关。