Angular 2点击多次内部ngFor

我有一个非常奇怪的问题（从未见过）与我的组件。我试图在点击一个ngFor列表中的按钮时删除一行。当我只有一条线它的工作原理，但是当它超过一行在事件被触发两次，一次为好线，一次用于第一线（删除后，其他行）：Angular 2点击多次内部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标签标签将点击按钮，所以如果你有任何（点击）属性它会被解雇两次。

来源

2016-11-29 Nicolas Garin

您是否检查过滤功能？这不是问题吗？您是否尝试在removeTag（）函数内部放置一些'console.log（）'来查看它是否被调用两次？也许你应该在removeTag函数的末尾尝试'console.log（this.selectedOptions）'来看看改变了什么。让我们知道是否有新的东西，因为现在它很奇怪。你的代码很好，所以... –

谢谢我没有任何过滤功能。 removeTag被调用两次。我发现，即使我点击.tag元素（巫婆是为什么removeTag被调用两次），它被称为我不知道为什么，如果我点击.tag元素，目标（在事件对象内）是列表o_O的第一个按钮！ –

你可以在Plunker中重现吗？ –

试试这个

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

来源

2016-11-29 15:01:39

谢谢你的回复，我已经尝试通过索引删除，但我有同样的问题... :( –

在这种情况下，别的东西是问题，这对我有用 –

其实第二次点击将被父元素被调用。浏览器的默认行为是触发点击输入，一旦父母被点击。

使用

event.preventDefault();

停止第二触发。

来源

2017-09-27 10:40:10

Angular 2点击多次内部ngFor

回答

相关问题