Angular 2 - ngFor 不在锚点上生成（点击）答案

【问题标题】：Angular 2 - ngFor not generating (click) on an anchorAngular 2 - ngFor 不在锚点上生成（点击）
【发布时间】：2018-05-13 18:29:12
【问题描述】：

我正面临 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)" 部分之外的所有内容..

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

谢谢

丽安娜

【问题讨论】：

【解决方案1】：

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

检查事件侦听器，您应该会看到如下内容：

a
Function    vendor.js:86289
Type        Bubbling

对vendor.js 的引用是您的onAddClicked。

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

【讨论】：

【解决方案2】：

如您所知，*ngFor 中的 * 只是在幕后生成的模板的糖语法。这样做意味着它将点击事件附加到模板的每个相应子项（a 锚点），但不会为其生成标记。它附加到元素本身。您很可能会在浏览器开发者工具的事件选项卡中看到它

【讨论】：