Angular HostBinding в настраиваемой директиве не работает внутри * ngFor

Я создал специальную директиву, которая добавляет / удаляет селектор классов с событием щелчка. Должно быть довольно просто, и все работает нормально, если я использую директиву вне цикла ngFor. Директива состоит из приведенного ниже кода:

import { Directive, HostBinding, HostListener, Input } from '@angular/core';
@Directive({
    selector: '[appFav]'
})
export class FavDirective {
    @HostBinding('class.isFav') isFav:boolean = false;

    @HostListener('click') onClick() {
        this.isFav = !this.isFav;
        console.log('clicked');
    }
    @Input() set appFav(val:boolean) {
        this.isFav = val;
    }
}

И я пытаюсь использовать эту директиву для кнопки внутри компонента Cards. Итак, внутри html-шаблона компонента Cards код кнопок выглядит так:

<div class="favBtn" appFav><span class="material-icons">favorite_border</span></div>

Это работает, когда я использую компонент сам по себе, но когда я генерирую несколько карточек с помощью цикла ngFor, как показано ниже, декоратор, похоже, больше не работает.

<custom-card class="card" *ngFor="let card of getCards()"></custom-card>

Свойство isFav в директиве фиксировано, а селектор класса .isFav не добавляется, когда я проверяю кнопку. Хотя сообщения console.log отображаются правильно, это означает, что метод onClick в директиве действительно выполняется.

Любая помощь приветствуется. Заранее спасибо.


angular angular-directive angular2-hostbinding
person Ahmed Yousry    schedule 25.06.2020    source источник
comment
Вы пробовали без ngfor использовать 2 экземпляра вручную на странице, если это работает?   -  person LogicBlower    schedule 26.06.2020
comment
эй, он работает нормально, я только что проверил, что он добавляет класс isFav,   -  person LogicBlower    schedule 26.06.2020
comment
Он отлично работает, когда я создаю 2 экземпляра вручную, однако экземпляры, созданные с помощью цикла ngFor, не взаимодействуют должным образом. Я пробовал это в новом проекте, но проблема все равно осталась. Обратите внимание, что экземпляры создаются с соответствующими классами правильно, однако событие щелчка не меняет их.   -  person Ahmed Yousry    schedule 27.06.2020
comment
Я размещаю приложение на stackblitz.com/edit/angular-ivy-uux4nw. Обратите внимание, что стиль кнопки переключения на первых двух картах работает правильно, в то время как кнопки на картах, созданных ngFor, не работают. Большое спасибо @LogicBlower   -  person Ahmed Yousry    schedule 27.06.2020

Ответы (1)


arrow_upward
0
arrow_downward

Прямо сейчас angular не может различать ч / б компоненты, если вы видите панель элементов, вы нажимаете кнопку, и все экземпляры обновляются. чтобы назначить уникальный ключ всем элементам в цикле, чтобы angular мог их различать.

- Попробуйте выполнить следующий код, и вы получите ожидаемое поведение:

в вашем app.component.html - добавьте trackBy, функция назначит уникальный ключ

  <app-media-item *ngFor="let mi of getMediaItems(); trackBy:trackBytitle"
                  [mediaItem]='mi'
                  (interact)='hdlMediaItem($event)' 
  >
  </app-media-item>

и в вашем app.component.ts - сейчас заголовок кажется мне уникальным, поэтому я возвращаю часть заголовка.

trackBytitle(index: number, mediaObj: any): string {
return mediaObj.title; // title is unique or return something unique 
}
person LogicBlower    schedule 27.06.2020