ngClass 结合多个条件？答案

【问题标题】：ngClass combining multple conditions?ngClass 结合多个条件？
【发布时间】：2021-10-27 21:15:06
【问题描述】：

如何在 Angular 中组合多个条件？我目前使用 Angular 12。

示例：

[ngClass]="condition1 ? 'className1': 'classname2'" 如果条件 1 为真或假，则此方法有效。

现在如何添加多个？

[ngClass]='condition1 ? 'className1' : 'classname2' && conditionX ? 'classNameY' : 'classNameZ'"

似乎只检查了第一个条件，&& 之后的其他任何内容都没有显示

【问题讨论】：

这能回答你的问题吗？ Angular 2 ngClass function
使用函数来评估你的类名，这使你可以做任何你想做的事情。喜欢这里：stackoverflow.com/questions/50226800/angular-2-ngclass-function
是的，可以做一个函数，但我想把它保存在 html 中。这似乎是一个简单的条件，不应该只需要一个函数来拥有多个。我希望有人可以在 html 中提出解决方案

【解决方案1】：

对于多种情况，您可以这样做：

[ngClass]="[ condition1 ? 'className1' : 'className2', conditionX ? 'classNameY' : 'classNameZ']"

用','分隔每个条件

【讨论】：

【解决方案2】：

要应用多个条件类，请参阅 Angular 文档。它有很好的解释。 Link

【讨论】：

【解决方案3】：

使用一个对象可以处理多个条件

<div [ngClass]="{'firstClass': true, 'secondClass': true, 'thirdClass': false}">
     // your code...
</div>

【讨论】：