Fare clic su evento su ngfor loop eseguito due volte. angolare

Question 1

Ho trovato un interessante problema che non posso ignorare.

Ho i seguenti *ngFor loop con un evento 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>

l'evento click fn filterByCategory() è un processo semplice, responsabile per aggiungere o rimuovere la stringa di un array per poi filtrare un array di oggetti.

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

Quando viene generato l'evento, si corre due volte e se la dichiarazione aggiunge la stringa e poi lo rimuove.

Non è un modo per risolvere questo problema?

Grazie!

Question 2

Credo sia perché è collegato click listener di eventi per label. Se si fa clic sull'etichetta che si attiva l'evento per la prima volta, ma poi la casella di controllo viene cliccato e si innesca una volta nuovamente click evento.

Perché si sta utilizzando label qui si possono muovere liberamente click ascoltatore checkox. Così, invece di quello che hai, puoi fare così:

<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

Credo sia perché è collegato click listener di eventi per label. Se si fa clic sull'etichetta che si attiva l'evento per la prima volta, ma poi la casella di controllo viene cliccato e si innesca una volta nuovamente click evento.

Perché si sta utilizzando label qui si possono muovere liberamente click ascoltatore checkox. Così, invece di quello che hai, puoi fare così:

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

Vi erano assolutamente ragione! In realtà quella parte non attraversare la mia mente dal momento che l'ingresso è display:none, ho dimenticato che l'etichetta sta chiedendo angolare di eseguire anche due volte visto che il controllo è cambiato! Grazie Kamlar!

Fare clic su evento su ngfor loop eseguito due volte. angolare

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria