时间戳

首页 > 解决方案 > 根据条件在 Angular 中使用 [ngClass] 添加/删除 CSS 类的语法

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

问题描述

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

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

标签： cssangularproperty-binding

解决方案

尝试这个：

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

或者

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

[ngClass]也可以使用函数：

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

推荐阅读