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

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

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

谢谢

莉安娜

Answer 1

在检查 DOM/绑定事件的元素时，事件绑定不明确可见是很常见的。

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

a
Function    vendor.js:86289
Type        Bubbling

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

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

Answer 2

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

Angular 2 - ngFor not generating (click) on an anchor