当元素在Angular中具有特定类时如何移除CSS类

Question

我正在使用AngularNGCLASS指令来更改标题的颜色，它的工作方式与预期的一样:

[ngClass]=“{'text-warning':progress==”1“，'text-success':progress==”2“}

问题是:当标记具有active类时，我想删除之前为我的标题添加的类。

<div class="list-group" id="list-tab" role="tablist">
  <a class="list-group-item list-group-item-action active">
    <div class="row justify-content-between">
      <div class="col-md-7"><strong>{{module.title}}</strong></div>
      <div class="col-md-5" style="text-align: end;">
        <small
          [ngClass]="{ 'text-warning':progress == '1', 'text-success':progress == '2' }"
        >
          - {{getProgress(module.moduleProgress)}}
        </small>
      </div>
    </div>
  </a>
</div>

Answer 1

我可以使用一些自定义的CSS类来解决我的问题，而不是使用引导程序:

首先，我添加了以下类:

.active small{
    color: white !important;
}

.text-green {
    color:green;
}

.text-orange {
    color: orange;
}

然后将text-warning和text-success分别替换为之前添加的类“text-green”和“text-orange”。

注意:问题是引导文本着色类都使用！重要，从自定义类中删除它就可以了。