Angular 2 click 在 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();

停止第二次触发。

Answer 2

完整解决方案：

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

然后是接受事件的方法：

public removeTag (option: NxtSelectOptionComponent, event) {
    event.preventDefault(); // This is needed to prevent the click event from firing twice on a label
    this.selectedOptions = [
        ...this.selectedOptions.filter(o => o !== option),
    ]
}

Answer 3

值得一提我的情况，以防它绊倒其他人。包含按钮的组件订阅了一个 observable 并且永远不会取消订阅，因此这使旧组件保持活动状态并触发它们的单击方法。确保 .unsubscribe() 您在按钮的父组件中创建的任何订阅。

Answer 4

试试这个

<div *ngFor="let user of users; let i=index" >
    {{user.name}}
    <div>
        <a class="btn btn-danger" (click)="removeUser(i)">-</a>
    </div>
</div>

removeUser(i): void {
    this.users.splice(i, 1);
}