引導CSS沒有得到在ngClass

我下面的代碼行顯示基於模式的類型模式的消息正確呈現 -引導CSS沒有得到在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>

問題是，我沒有看到正確的文本顏色警報消息具有上述條件並呈現爲白色。

在瀏覽器控制檯我沒有看到「文本警告」正在呈現。但我確實看到文字顏色設置爲白色的地方，如下所示。

但是，如果我以上條件更改爲以下 -

<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>

我見 '的文字警告' CSS得到正確應用，如下圖所示。

這裏CSS壓倒一切不會發生。

編輯-1：

.sb警報，圖標下面的代碼 -

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

不知道，如果這是因爲發生了 -

對'Alert'012連續使用'text-warning'css'確認'方案。
同時使用Font Awesome和Bootstrap。

來源

2017-08-29 coder87

類型==錯誤，'error'是一個變量或一個字符串？ –

@LonYang - 錯誤是一個變量，而不是字符串。 – coder87

我找到了這個錯誤的原因。因爲'text-warning'由'type == alert'和'type == confirm'控制，所以需要'type == alert && type == confirm'，你可以試試我的答案代碼 –

<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>

來源

2017-08-29 08:38:49

它的確行得通！謝謝：） – coder87

引導CSS沒有得到在ngClass

回答

相關問題