如何使用 ng-class 实现 if-else 条件？答案

【问题标题】：how to implement if-else condition with ng-class?如何使用 ng-class 实现 if-else 条件？
【发布时间】：2020-07-28 21:25:22
【问题描述】：

我正在尝试使用两个不同的网格列绑定到 ng-class 与 if-else 条件。我无法正确地做到这一点。有人可以指导我做错了什么。谢谢。

HTML

<div ng-class="{'col-md-11': test1 === null, 'col-md-6' : test1 !== null}" *ngIf="(test !== null)">
<div>
<div ng-class="{'col-md-11': test === null, 'col-md-6' : test !== null}" *ngIf="(test1 !== null)">
<div>

【问题讨论】：

请阅读：angular.io/api/common/NgClass
这能回答你的问题吗？ Angular: conditional class with *ngClass
另一个：stackoverflow.com/questions/63008176/…

标签： html angular

【解决方案1】：

您可以使用[class] 代替ngClass。

<div [class.col-md-11]="test1 === null" [class.col-md-6]="test1 !== null" *ngIf="test !== null"></div>
<div [class.col-md-11]="test === null" [class.col-md-6]="test !== null" *ngIf="test !== null"></div>

【讨论】：

我不知道你能做到这一点。这对于错误/验证问题非常好。 ngClass 方式在 Html 中创建了一些 JSONesque Spaghetti 代码。

【解决方案2】：

你可以使用类似下面的代码。

[ngClass]="{'highlight': 表达式}"

highlight 是当表达式返回布尔值时应应用的类名。表达式也可以是函数。要记住的要点是你应该得到布尔类型的值。

[ngClass]="{'highlight': 表达式, 'highlight1': 表达式}"

如果您想要一个 else 条件，您可以再添加一个类并执行相同的表达式。所以无论哪个是真的，它都会应用那个类。

有关更多详细信息，您可以随时访问 ANGULAR IO 网站。它将为您提供所有答案。

【讨论】：

【解决方案3】：

ngClass可以直接使用三元条件

<div [ngClass]="test1 ? 'col-md-6' : 'col-md-11'" *ngIf="(test !== null)">
<div>

https://stackblitz.com/edit/angular-ivy-ggcr4l

【讨论】：

【解决方案4】：

您可以在 ngClass 中包含如下条件。

<div [ngClass]="{'col-md-11': test1 === null, 'col-md-6' : test1 !== null}">
<div>

这里 col-md-11 只有当 test 值为 null 时才会添加，而 col-md-6 会在 test1 不为 null 时添加

【讨论】：