0

我创建了一个自定义指令，该指令通过单击事件添加/删除类选择器。应该很简单，只要我在 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 类选择器。尽管 console.log 消息正确显示，这意味着指令中的 onClick 方法确实运行了。

任何帮助将非常感激。提前致谢。

4

1 回答 1

-1

现在，如果您看到元素面板单击按钮，所有实例都会更新，那么角度无法区分黑白组件。因此为循环中的所有元素分配一个唯一键，以便角度可以区分它们。

--尝试下面的代码你会得到预期的行为：

在你的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 
}
于 2020-06-27T04:53:10.560 回答