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

回答

相關問題