从 ngFor 添加一个类答案

【问题标题】：Add a class from ngFor从 ngFor 添加一个类
【发布时间】：2021-09-28 19:26:56
【问题描述】：

我有一个 ngFor 循环和里面的一些 div。代码如下所示：

<div *ngFor="let element of bodyElements">
   <div class="element-container">{{element.name}}</div>
</div>

现在我需要为每个生成的元素添加一个来自 ngFor 的类。所以我尝试了这段代码：

<div *ngFor="let element of bodyElements">
   <div class="element-container" [class]="element.className">{{element.name}}</div>
</div>

但是现在element-container 类不工作了。如何让这两个类都工作？

【问题讨论】：

【解决方案1】：

<div *ngFor="let element of bodyElements">
   <div class="element-container" [ngClass]="element.className">{{element.name}}</div>
</div>

【讨论】：

【解决方案2】：

您可以使用 ngClass 根据条件为任何元素添加类，

语法如下： [ngClass]="{className: 条件}"

在您的情况下，它将是： [ngClass]="{element.className: true}"

【讨论】：