bootstrap css无法在ngClass中正确呈现

Question

我已经按照代码行显示了基于模态类型的模态消息 -

<div class="modal-body">
    <span class="fa sb-alert-icon" [ngClass]="{ 'fa-exclamation-circle text-danger': (type == error),'fa-exclamation-triangle text-warning': (type == alert)
     ,'fa-question-circle text-warning': (type == confirm), 'fa-info-circle text-info': (type == info)}">{{message}}</span>
</div>

问题是，我没有看到具有上述条件的警报消息的正确文本颜色，并且呈现为白色。

BackButton which doesn't work

在浏览器控制台中，我看不到文字警告＆＃39;被渲染。但我确实看到文字颜色设置为白色的地方，如下所示。

但是，如果我将上述条件改为以下 -

<span class="fa sb-alert-icon" [ngClass]="{ 'fa-exclamation-circle text-danger': (type == error),'fa-exclamation-triangle text-warning': (type == alert)
     , 'fa-info-circle text-info': (type == info)}">{{message}}</span>

我看到＆＃39; text-warning＆＃39; css正确应用，如下所示。

这里CSS重写并没有发生。

EDIT-1：

.sb-alert-icon有以下代码 -

.sb-alert-icon{
  font-size: medium;
  padding-right: 10px;
}

不确定，如果发生这种情况是因为 -

1. 使用＆＃39; text-warning＆＃39;连续css两个＆＃39;警报＆＃39; ＆安培; ＆＃39;确认＆＃39;场景。
2. 同时使用Font Awesome和bootstrap。

Answer 1

<span class="fa sb-alert-icon" 
  [ngClass]="{
    'fa-exclamation-circle text-danger': type == error,
    'fa-exclamation-triangle': type == alert,
    'fa-info-circle text-info': type == info,
    'fa-question-circle': type == confirm,
    'text-warning': type == alert || type == confirm
   }">
   {{ type }} - {{ message }}
</span>