Angular 自定义指令中的 HostBinding 在 *ngFor 中不起作用

Question

我创建了一个自定义指令，用于添加/删除带有点击事件的 class 选择器。应该非常简单，只要我在 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 组件内的按钮上使用该指令。所以在 Cards 组件的 html 模板中，按钮代码如下所示：

<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 class 选择器。尽管 console.log 消息显示正确，这意味着指令中的 onClick 方法执行运行.

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

现在 angular 无法区分 b/w 组件，如果您看到元素面板，您单击一个按钮，所有实例都会更新。所以要为循环中的所有元素分配一个唯一的键，以便 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 -- 现在标题对我来说似乎很独特所以我 return 标题部分。

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

Angular 自定义指令中的 HostBinding 在 *ngFor 中不起作用

Angular HostBinding in a custom directive not working inside an *ngFor

angular-directive

angular2-hostbinding

angular