我發現了一個我無法繞過的有趣問題。
我有以下帶有點擊事件的 *ngFor 回圈。
<label *ngFor="let status of statuses; trackBy: id"
(click)="filterByCategory(status.name)">{{ status.name }}
<span [attr.data-chip-state]="status.name">
{{ partners | counter: status.name }}</span>
<input type="checkbox" />
<span ></span>
</label>
單擊事件 fn filterByCategory() 是一個簡單的程序，負責從陣列中添加或洗掉字串，然后過濾物件陣列。
filterByCategory(category, event: Event) {
let verify = this.filterArr.includes(category);
if (!verify) {
this.filterArr.push(category)
} else {
let indexOfCategory = this.filterArr.indexOf(category);
this.filterArr.splice(indexOfCategory, 1);
}
this.filteredPartners = this.partners.filter(partner => {
return this.filterArr.includes(partner.partner_status.name);
})
}
當事件被觸發時，它運行兩次，if 陳述句首先添加字串，然后洗掉它。
有沒有人有辦法解決這個問題？
謝謝！
uj5u.com熱心網友回復：
我相信這是因為您將click事件偵聽器附加到label. 如果您單擊標簽是第一次觸發事件，但隨后單擊復選框并再次觸發click事件。
因為您在label這里使用- 您可以自由地將click偵聽器移動到checkox. 因此，您可以這樣做，而不是您擁有的：
<label *ngFor="let status of statuses; trackBy: id">{{ status.name }}
<span [attr.data-chip-state]="status.name">
{{ partners | counter: status.name }}</span>
<input type="checkbox" (click)="filterByCategory(status.name)" />
<span ></span>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/362683.html