下拉组件在 Chromium 浏览器中无效

Question

我有一个带有下拉组件（基于 <select>）的简单饼图，用于切换图表数据（我使用的是 angular 6）。它在 firefox 中工作，但是当我在 chromium 上测试它时没有任何反应（好像用户根本没有 select 下拉菜单上的任何内容）。为什么会这样？完整的工作示例在 stackblitz here.

例如，在 SelectComponent 中有 onClick 方法发出 selected 值（来自 <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 的一些错误，还是我遗漏了什么？

Answer 1

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

上使用（单击）事件

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

您可以从

访问当前值

$event.target.value

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

下拉组件在 Chromium 浏览器中无效

Dropdown component not having effect in Chromium browser

chromium

eventemitter

chart.js

angular

angular-event-emitter