根据条件在 Angular 中使用 [ngClass] adding/removing CSS class 的语法

Question

当两个布尔值中的任何一个为真时，如何 add/remove CSS class？

[ngClass]="{'load': loading , 'load': loadClass}"

Answer 1

绑定 class 名称。

尝试：

[class.load]="loading || loadClass"

Answer 2

[ngClass]="{'load': loading || loadClass }"

Answer 3

试试这个：

[class.load]="loading || loadClass"

或

[ngClass]="{'load': loading || loadClass }"

[ngClass]也可以用function:

<div [ngClass]="setMyClasses()">
  ...
</div>

其中：

setMyClasses() {
  let classes = {
    important: this.isImportant,
    inactive: !this.isActive,
    saved: this.isSaved,
    long: this.name.length > 6
  };
  return classes;
}

这可以扩展到使用 AND、OR、NOT 等的各种逻辑评估组合。