클릭하 이벤트에 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

당신이 절대적으로 오른쪽! 실제로는 부분이지 않은 내 마음 때문에 입력 display:none,나는 잊었는 레이블은 각를 실행하도 이후 두 번 확인이 변경되었습니다! 감사 Kamlar!
cristian Oliveira

다른 언어로

이 페이지는 다른 언어로되어 있습니다

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