Haga clic en evento en ngfor bucle se ejecuta dos veces. angular

0

Pregunta

He encontrado un interesante problema que no puedo eludir.

Tengo el siguiente *ngFor bucle 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>

el evento click fn filterByCategory() es un proceso simple, responsable de agregar o quitar de la cadena a partir de una matriz para luego filtrar una matriz de objetos.

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

Cuando se desencadena el evento, se ejecuta dos veces, y la declaración de si primero se agrega la cadena y, a continuación, quita.

enter image description here

¿Alguno tiene una manera de resolver esto?

Gracias!

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

Mejor respuesta

1

Yo creo que se debe a que adjunto click detector de eventos para label. Si hace clic en la etiqueta que activar el evento por primera vez, pero luego en la casilla de verificación se hace clic y se desencadena una vez más click evento.

Debido a que usted está usando label aquí usted puede moverse libremente click escucha a checkox. Así que en lugar de lo que usted tiene, usted puede hacer esto de esta manera:

<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

Absolutamente correcto! En realidad, esa parte no cruzar mi mente desde la entrada display:none, me olvidé de que la etiqueta está pidiendo angular para ejecutar el incluso dos veces desde que la comprobación cambiado! Gracias Kamlar!
cristian Oliveira

En otros idiomas

Esta página está en otros idiomas

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