Kliknij dwukrotnie wydarzenie w cyklu ngfor uruchomionej dwa razy. narożny

Question 1

Znalazłem ciekawy problem, którego nie mogę się obejść.

Mam cykl następujących urządzeń *ngFor z wydarzeniem kliknięcia.

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

zdarzenie kliknięcia fn filterByCategory () - jest to prosty proces, który jest odpowiedzialny za dodawanie lub usuwanie wierszy z tablicy, a następnie filtrować tablicę obiektów.

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

Gdy zdarzenie uruchamia się, jest wykonywana dwukrotnie, a operator if najpierw dodaje się wiersz, a następnie usuwa je.

Czy ma ktoś sposób na rozwiązanie tego problemu?

Dziękuję!

Question 2

Wierzę, że to dlatego, że chcesz ode mnie click detektor zdarzeń dla label. Po kliknięciu na etykietę, można zainicjowaniu wydarzenie po raz pierwszy, ale następnie naciśnięciu pola wyboru, i ono działa ponownie click zdarzenie.

Bo używasz label tutaj możesz się swobodnie poruszać click słuchacz, aby checkox. Więc zamiast tego, co masz, możesz zrobić to tak:

<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

Wierzę, że to dlatego, że chcesz ode mnie click detektor zdarzeń dla label. Po kliknięciu na etykietę, można zainicjowaniu wydarzenie po raz pierwszy, ale następnie naciśnięciu pola wyboru, i ono działa ponownie click zdarzenie.

Bo używasz label tutaj możesz się swobodnie poruszać click słuchacz, aby checkox. Więc zamiast tego, co masz, możesz zrobić to tak:

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

Miałeś całkowitą rację! W rzeczywistości ta część nie przyszło mi do głowy, tak jak enter, wyświetlacz:nie, zapomniałem, że etykieta prosi angular uruchomić parzysta dwukrotnie od momentu zmiany kontroli! Dziękuję ci, Камлар!

Kliknij dwukrotnie wydarzenie w cyklu ngfor uruchomionej dwa razy. narożny

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii