角度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),
    ]
}

我试图使用拼接,我试图添加stopPropagation ...我不明白我已经完成了大量的时间,这是我第一次看到它.

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

问题已解决:我发现了问题... FYI标签标签会点击按钮,所以如果你有任何(点击)属性,它会被解雇两次.

Answer 1

实际上,第二次点击将由父元素调用.一旦单击父级,浏览器的默认行为是触发对输入的单击.

使用

event.preventDefault();

停止第二次触发.

Answer 2

尝试这个

<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);
}