根据条件在 Angular 中使用 [ngClass] 添加/删除 CSS 类的语法

【问题标题】：Syntax for adding/removing CSS class using [ngClass] in Angular based on condition根据条件在 Angular 中使用 [ngClass] 添加/删除 CSS 类的语法
【发布时间】：2019-09-13 10:13:30
【问题描述】：

当两个布尔值中的任何一个为真时，如何添加/删除一个 CSS 类？

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

【问题讨论】：

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

标签： css angular property-binding

【解决方案1】：

试试这个：

[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 等扩展到各种逻辑评估组合。

【讨论】：

【解决方案2】：

绑定类名。

试试：

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

【讨论】：

【解决方案3】：

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

【讨论】：