css bootstrap ne se rendu correctement dans ngClass

Question

J'ai suivant ligne de code pour afficher un message en modal en fonction du type modal -

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

problème est que, je ne vois pas la couleur du texte approprié pour message d'alerte avec les conditions ci-dessus et son rendu en blanc.

Dans la console du navigateur, je ne vois pas « texte d'avertissement » être rendu. Mais je vois l'endroit où la couleur du texte est blanche, ce qui est indiqué ci-dessous.

Cependant, si je change condition ci-dessus à la suite -

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

Je vois 'texte d'avertissement' se css correctement appliqué comme indiqué ci-dessous.

Ici primordial CSS ne se produit pas.

EDIT-1:

.sb-alerte-icon a le code ci-dessous -

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

Je ne sais pas, si cela se produit parce que -

1. en utilisant 'text-warning' css consécutivement pour les deux 'Alert' & 'Confirmer' les scénarios. Utilisant à la fois Font Awesome et bootstrap ensemble.

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>