Question

使用ng-for循环时，仅当该项目的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>

但是它没有编译。

请注意，“收藏夹列表”可能会加载到“产品”之后的页面上。

任何想法我该怎么做？

谢谢！

Answer 1

问题出在您的 some（）方法中，

这是一个例子

component.html

<div *ngFor="let p of products" [class.Flag]="someMethod(p.id)"> {{p.name}} 
</div>

component.css

.Flag { background: red; }

和component.ts

 products = [
          {"id": 1 , name: 'abc'}, 
          {"id": 2 , name: 'xyz'}
        ];

  favoriteList = [
          {"id": 1 , name: 'test'}, 
          {"id": 3 , name: 'test1'}
        ];

  someMethod(id){
    return this.favoriteList.some((item) => item.id == id);
  }

这是Stackblitz演示。

Answer 2

使用ng-container来访问div中用于以下类的模板变量：

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

解决方案2：

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

当您从api收到

使用favourite更新产品

。

Answer 3

ngClass语法可能存在问题。这是堆栈闪电代码https://stackblitz.com/edit/angular-3zfrrs

angular 5-仅当元素存在于数组

3 个答案: