[ng-class]用一个条件添加多个classes

Question

是否可以添加多个类和[ng-class]以及单个条件？

像这样：

<div [ngClass]="Cond ? 'class1, class2' : 'class3, class4'"></div>

Answer 1

指定于： https://angular.io/api/common/NgClass#description 你可以： <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Answer 2

你可以这样做：

<div [ngClass]="{'class1 class2' : condition, 'class3': !condition"}></div>

Answer 3

你几乎是对的，只是去掉逗号：

<div [ngClass]="Cond ? 'class1 class2' : 'class3 class4'"></div>

试试 stackblitz.com - I wrote an example.

Answer 4

这很容易。步骤

创建一个布尔值来控制 class 绑定条件

public hasError: boolean = false;

创建一个对象 class 名称如下

public classObj: any = {
    "classA": !this.hasError,
    "classB": this.hasError,
    "classC": !this.hasError,
    // how much ever class you want
}

最后使用 ngClass 指令绑定 classObj

<h2 [ngClass]="classObj">Hey, I have a lot of classes!</h2>

[ng-class]用一个条件添加多个classes

[ng-class]Add multiple classes with a single condition

ng-class

angular

angular8