bootstrap css 未在 ngClass 中正确呈现
bootstrap css not getting rendered properly in ngClass
我有以下代码行,用于根据模式类型以模式显示消息 -
<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>
问题是,对于具有上述条件的警报消息,我没有看到正确的文本颜色并将其呈现为白色。
在浏览器控制台中,我没有看到 'text-warning' 被渲染。但是我确实看到了文本颜色设置为白色的地方,如下所示。
但是,如果我将上述条件更改为以下 -
<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>
我看到 'text-warning' css 正在正确应用,如下所示。
这里 CSS 不会发生覆盖。
编辑-1 :
.sb-alert-icon 具有以下代码 -
.sb-alert-icon{
font-size: medium;
padding-right: 10px;
}
不确定,如果发生这种情况是因为 -
- 在'Alert'和'Confirm'场景中连续使用'text-warning'css。
- 同时使用 Font Awesome 和 bootstrap。
<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>
我有以下代码行,用于根据模式类型以模式显示消息 -
<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>
问题是,对于具有上述条件的警报消息,我没有看到正确的文本颜色并将其呈现为白色。
在浏览器控制台中,我没有看到 'text-warning' 被渲染。但是我确实看到了文本颜色设置为白色的地方,如下所示。
但是,如果我将上述条件更改为以下 -
<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>
我看到 'text-warning' css 正在正确应用,如下所示。
这里 CSS 不会发生覆盖。
编辑-1 :
.sb-alert-icon 具有以下代码 -
.sb-alert-icon{
font-size: medium;
padding-right: 10px;
}
不确定,如果发生这种情况是因为 -
- 在'Alert'和'Confirm'场景中连续使用'text-warning'css。
- 同时使用 Font Awesome 和 bootstrap。
<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>