Angular 2 - ng不在锚点上生成（单击）

Question

我正面临着使用Angular的* ngFor结构指令的奇怪行为。

此代码......

<a *ngFor="let item of addMenuItems" href="#" (click)="onAddClicked(item)">{{item}}</a>

...当数组包含两个项时生成：

<a href="#">item 1</a>
<a href="#">item 2</a>

或换句话说，它生成除（click）=“onAddClicked（item）”部分以外的所有内容..

这种奇怪行为可能是什么原因？

由于

Riana

Answer 1

在检查DOM /绑定事件的元素时，事件绑定通常不会显式可见。

检查事件监听器，您应该看到类似的内容：

a
Function    vendor.js:86289
Type        Bubbling

vendor.js的引用是onAddClicked。

重要的是要记住，在浏览器中显示之前会编译angular，因此它会识别(click)绑定/属性，然后将其转换为该元素的addEventListener()绑定。

Answer 2

因此，您知道* ngFor中的*只是幕后生成的模板的糖语法。拥有它将意味着它将click事件附加到模板的每个相应子节点（一个锚点）但它没有为它生成标记。它附加到元素本身。很可能您将能够在浏览器开发人员工具的事件选项卡中看到它