单击 ngfor 循环运行上的事件两次。 angular

Question

我发现了一个我无法绕过的有趣问题。

我有以下带点击事件的 *ngFor 循环。

<label class="input-group" *ngFor="let status of statuses; trackBy: id"
    (click)="filterByCategory(status.name)">{{ status.name }}
    <span class="chip chip-icon" [attr.data-chip-state]="status.name">
    {{ partners | counter: status.name }}</span>
    <input type="checkbox" />
    <span class="checkmark"></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 语句首先添加字符串然后删除它。

有没有人有办法解决这个问题？

谢谢！

Answer 1

我相信这是因为您将 click 事件侦听器附加到 label。如果您单击标签，您将第一次触发事件，但随后复选框被单击并再次触发 click 事件。

因为您在这里使用 label - 您可以自由地将 click 侦听器移动到 checkox。因此，您可以这样做，而不是您拥有的：

<label class="input-group" *ngFor="let status of statuses; trackBy: id">{{ status.name }}
<span class="chip chip-icon" [attr.data-chip-state]="status.name">
{{ partners | counter: status.name }}</span>
<input type="checkbox" (click)="filterByCategory(status.name)" />
<span class="checkmark"></span>

单击 ngfor 循环运行上的事件两次。 angular

Click event on ngfor loop running twice. angular

events

click

ngfor

angular

单击 ngfor 循环 运行 上的事件两次。 angular

Click event on ngfor loop running twice. angular

events

click

ngfor

angular

单击 ngfor 循环运行上的事件两次。 angular