Дважды щелкните событие в цикле ngfor, запущенном дважды. угловой

Question 1

Я нашел интересную проблему, которую не могу обойти.

У меня есть цикл follwing *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);
    }) 
  }

Когда событие запускается, оно выполняется дважды, и оператор if сначала добавляет строку, а затем удаляет ее.

Есть ли у кого - нибудь способ решить эту проблему?

Спасибо!

Question 2

Я верю, что это потому, что ты привязался 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>

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

Я верю, что это потому, что ты привязался 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>

Вы были абсолютно правы! На самом деле эта часть не приходила мне в голову, так как ввод-дисплей:нет, я забыл, что метка просит angular запустить четный дважды с момента изменения проверки! Спасибо тебе, Камлар!

Дважды щелкните событие в цикле ngfor, запущенном дважды. угловой

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории