Question

我正在使用ng2项目，我需要一个任务的帮助，我应该在哪里添加css类，只为数组中的一个项目。

我得到了这样的东西：

<div class="ds-photo__item" *ngFor="let albumPhoto of albumPhotos">
  <div class="ds-photo__item--cover">
    <img class="ds-photo__item--cover-photo" [src]="albumPhoto.url" alt="" (click)="choseCover(albumPhoto)" [class.selected]="...">
  </div>
</div>

我需要为下面的功能选择的一个项目添加类选择：

selectCover() {
    if (this.album.cover) {
        this.cover = this.albumPhotos.find( photo => photo.id === this.album.cover );
        console.log("COVER: ", this.cover);
        this.isCover = true;
    } else { this.isCover = false }
}

之后，我有一个目前有专辑封面的对象。我需要将“选定”类添加到列出的项目中，这实际上是封面。

我需要这样的东西： [class.selected] =“如果albumPhoto.id === cover.id”

或类似的东西。有可能传递函数，而不仅仅是[class.my-class]？

中的变量

请提示！关心Greg

Answer 1

您可以按如下方式使用ngClass：

<img class="ds-photo__item--cover-photo" [src]="albumPhoto.url" alt="" (click)="choseCover(albumPhoto)" [ngClass]="{selected : albumPhoto.id === cover.id}">

Answer 2

完成：

[class.selected]="cover.id === albumPhoto.id"

我希望它会帮助别人。

再见！

Answer 3

如果您只需要根据某些条件应用一个类，那么请使用 [class.selected]="cover.id === albumPhoto.id"

<img class="ds-photo__item--cover-photo" [src]="albumPhoto.url" alt="" (click)="choseCover(albumPhoto)" [class.selected]="cover.id === albumPhoto.id">
[class.selected]="cover.id === albumPhoto.id"

但是如果您根据某些条件要应用多个类，那么只需使用此格式

[ngClass]="{selected : albumPhoto.id === cover.id}"

<img class="ds-photo__item--cover-photo" [src]="albumPhoto.url" alt="" (click)="choseCover(albumPhoto)" [ngClass]="{selected : albumPhoto.id === cover.id}">

根据Angular2的某些条件添加类

3 个答案: