Angular 2点击在ngFor内多次触发

Question

我的组件有一个非常奇怪的问题(以前从未见过)。单击 ngFor 列表中的按钮时，我试图删除一行。当我只有一行时它可以工作但是当它超过一行时事件被触发两次，一次是好的行，一次是第一行(删除另一行后):

<label>
    <div class="tag" *ngFor="let o of selectedOptions;">
        <span class="tag-text">{{ o.textContent }}</span>
        <button (click)="removeTag(o)" type="button" class="fa fa-times"></button>
    </div>
</label>

这里是我的方法女巫被调用了两次(只有当有多个“选项”时):

public removeTag (option: NxtSelectOptionComponent) {
    this.selectedOptions = [
        ...this.selectedOptions.filter(o => o !== option),
    ]
}

我试过使用 splice，我试过添加 stopPropagation...我不明白我已经做了很多次，这是我第一次看到。

编辑:当我点击 .tag 元素时调用 removeTag 方法，这就是为什么当我点击按钮时它被调用两次，但我无法弄清楚为什么...... (click) 属性只在按钮上

问题已解决:我发现了问题...仅供引用标签标签将点击按钮，因此如果您有任何(点击)属性，它将被触发两次。

Answer 1

实际上第二次点击会被父元素调用。 浏览器的默认行为是，一旦父级被点击，就会触发对输入的点击。

使用

event.preventDefault();

停止第二个触发器。