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

【问题标题】：How to remove a CSS class when the Element has a specific Class in Angular当元素在Angular中具有特定类时如何删除CSS类
【发布时间】：2020-10-26 14:44:51
【问题描述】：

我正在使用 Angular NgClass 指令来更改标题的颜色，并且它按预期工作：

[ngClass]="{ 'text-warning':progress == '1', 'text-success':progress == '2' }

问题是：当<a> 标记具有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>

【问题讨论】：

使用ngClass 和<a> 来添加/删除active 类，并与其他ngClass 使用相同的条件
@AnuragSrivastava 带有<a> 的活动类由引导脚本自动添加和删除，您建议我手动解决问题吗？

标签： css angular angular8

【解决方案1】：

我能够使用一些自定义 CSS 类而不是引导类来解决我的问题：

首先我添加了这些类：

.active small{
    color: white !important;
}

.text-green {
    color:green;
}

.text-orange {
    color: orange;
}

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

注意：问题在于引导文本着色类都使用!important，将其从自定义类中删除就可以了。

【讨论】：