点击事件在ngfor循环的运行两次。 角

0

的问题

我发现一个有趣的问题,我不能绕过。

我有以下*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);
    }) 
  }

当事件被触发,它运行两次,如果发言第一次增加了串然后将其删除。

enter image description here

没有任何一个都有一种方法来解决这个问题?

谢谢你!

angular click events ngfor
2021-11-20 19:18:11
1

最好的答案

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>
2021-11-20 19:37:54

你是绝对正确的! 实际上,这一部分不过我的头脑由于输入是显示:没有,我忘了那标签要求的角度来运行,甚至两倍,因为该检查改变了! 谢谢你Kamlar!
cristian Oliveira

其他语言

此页面有其他语言版本

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................