Klepněte na událost na ngfor smyčka běží dvakrát. úhlové

Question 1

Zjistil jsem zajímavý problém, že se nemůžu obejít.

Mám následující *ngFor smyčky s událost click.

<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>

události click fn filterByCategory() je jednoduchý proces, zodpovědný za přidat nebo odstranit řetězec z pole, aby pak filtrovat pole objektů.

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

Když událost je spuštěna, běží se dvakrát a jestli se prohlášení první přidá řetězec, a pak odstraní je.

Někdo má způsob, jak vyřešit tento problém?

Děkuji!!!

Question 2

Věřím, že to je proto, že jsi připojen click posluchače událostí label. Pokud kliknete na štítek můžete vyvolat akci poprvé, ale pak políčko je kliknout a spustí se znovu click akce.

Protože používáte label zde - můžete se volně pohybovat click posluchač checkox. Takže místo toho, co máte, můžete to udělat to takhle:

<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>

KamLar · Answer 1 · 2021-11-20T19:37:54

Věřím, že to je proto, že jsi připojen click posluchače událostí label. Pokud kliknete na štítek můžete vyvolat akci poprvé, ale pak políčko je kliknout a spustí se znovu click akce.

Protože používáte label zde - můžete se volně pohybovat click posluchač checkox. Takže místo toho, co máte, můžete to udělat to takhle:

<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>

Měl jsi naprostou pravdu! Ve skutečnosti, že část ani mě to nenapadlo, protože vstup je display:none, zapomněl jsem, že štítek žádá úhlové spustit i dvakrát, protože kontrola se změnila! Děkuji Kamlar!

Klepněte na událost na ngfor smyčka běží dvakrát. úhlové

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii