用 NgClass 添加和删除类

一、将 NgClass 与表达式一起使用

在要设置样式的元素上，添加 [ngClass] 并将其设置为等于某个表达式。在这里，是在 app.component.ts 中将 isSpecial 设置为布尔值 true。因为 isSpecial 为 true，所以 ngClass 就会把 special 类应用于此 <div> 上。

<!-- toggle the "special" class on/off with a property -->
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>

二、将 NgClass 与方法一起使用

要将 NgClass 与方法一起使用，请将方法添加到组件类中。在下面的示例中，setCurrentClasses() 使用一个对象来设置属性 currentClasses，该对象根据另外三个组件属性为 true 或 false 来添加或删除三个 CSS 类。 该对象的每个键（key）都是一个 CSS 类名。如果键为 true，则 ngClass 添加该类。如果键为 false，则 ngClass 删除该类。

app.component.ts

currentClasses: Record<string, boolean> = {};
/* . . . */
setCurrentClasses() {
  // CSS classes: added/removed per current state of component properties
  this.currentClasses =  {
    saveable: this.canSave,
    modified: !this.isUnchanged,
    special:  this.isSpecial
  };
}

在模板中，把 ngClass 属性绑定到 currentClasses，根据它来设置此元素的 CSS 类：

<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special.</div>

实战：

<div [ngClass]="{'active': flow_active_index == 1}">设备增长率</div>

<div [ngClass]="{'active': flow_active_index == 2}">检验覆盖率</div>

<div [ngClass]="{'active': flow_active_index == 3}">风险发生率</div>