angular 5 - 仅当元素存在于数组中时才添加类

Question

在使用ng-for循环时,我想将类添加到item,只有当项目的id存在于某些其他对象列表中时.

我试过这样的事情:

<div *ngFor="let p of products" [class.Flag]="favoriteList.some((item)=> item.Id == p.id)"> </div>

或这个:

<div *ngFor="let p of products" [ngClass]="favoriteList.some((item)=> item.Id == p.id) ? 'Flag': ''"> </div>

但它没有编译.

请注意,"favoriteList"可能会在 "产品" 之后加载到页面.

知道我该怎么办？

谢谢!

Answer 1

用于ng-container访问divfor 类中的模板变量，如下所示：

<ng-container *ngFor="let p of products">
    <div [ngClass]="getClass(p.id)">{{p.name}}</div>
</ng-container>

getClass(id) {
    return this.favoriteList.some(item => item.Id == id) ? 'Flag':'';
}

在这里找到 stackblitz

解决方案2：

<ng-container *ngFor="let p of products">
    <div [ngClass]="{'flag': p.favourite == true}">{{p.name}}</div>
</ng-container>

favourite当您从 api 收到信息时更新产品。