ngClass 根据条件只工作一次，如何使用连续变化的值应用 class

Question

我正在尝试根据不断变化的子值应用条件 class。这个 class 基于默认值工作正常，但如果更改值，我也想更改 class。<div [ngClass]="{'myClass': applyClass== true" >

Answer 1

你可以这样实现：

<div [ngClass]="{'myClass': applyClass == true, 'changedClass': applyClass == false" >

或者像这样：

<div [class.myClass]="applyClass == true" [class.changedClass]="applyClass == false" >

Answer 2

您可以使用属性绑定动态分配 class。

<div [class.foo]="isActive"></div>

其中 foo 是 css class，而 isActive 是您更改的变量。

Answer 3

只需使用[ngClass]。像这样：

<div [ngClass]="{'classToBeApplied': applyClass}">
  This is a div
</div>

<button (click)="toggleApplyClass()">
  Toggle Apply Class
</button>

组件类：

export class AppComponent  {
  applyClass = false;

  toggleApplyClass () {
    this.applyClass = !this.applyClass;
  }

}

组件CSS：

.classToBeApplied {
  background: red;
}

这里有一个 Sample StackBlitz 供您参考。

ngClass works only once based on a condition, how to apply a class using a continuous changing value