Добавить класс на основе некоторого условия Angular2

Question

Я работаю с проектом ng2, и мне нужна помощь с одной задачей, где я должен добавить класс css, только для одного элемента из массива.

Я получил sommething так:

<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 } 
} 

после этого, у меня есть один объект с током обложка альбома. Мне нужно добавить класс «selected» в список, который является актуальным.

мне нужно что-то вроде этого: [class.selected] = "если albumPhoto.id === cover.id"

или sommething похожи. Есть возможность передать функцию, а не только переменную в [class.my-class]?

Пожалуйста, для подсказок! С уважением, Грег

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}">