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

Question

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

例如，在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 错误，还是我遗漏了什么？

Answer 1

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

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

您可以从

访问当前值

$event.target.value

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