Angular2 [ngClass]条件付きブートストラップスタイリングが中断されています

Question

条件付きngClassスタイルとブートストラップラベルでAngular2を動作させることはできません。

<h1 [ngClass]="{'label label-warning': yourName=='Daniel', 
       'label label-success': yourName!='Daniel'}"> 

ngClassは、私は私のアプリのスタイルを設定するとき'label label-success'から最初の「ラベル」を削除しているように見えます。 2番目の条件が満たされたときに正しくスタイルを設定しますが、最初の条件が満たされたときにはスタイルが正しくありません。

要素の検査では、2番目の条件が満たされた場合、スタイルはh1.label.label-successですが、最初の条件が満たされた場合は、それはh1.label-errorと誤った形式になります。

エラーについては、このplunkerを参照してください。

https://plnkr.co/edit/qJLWBzCXXUn7hNKEWXIs?p=preview

は私がガイド（https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html）をアップグレードしAngularJSを踏襲しているが、それは仕事を得ることができない正しく

Answer 1

[ngClass]では、単一オブジェクトのキーでsingelクラス名を渡すことができます。 // stackoverflowの：だからまた、あなたが[class.classname]="condtionexpression"

<h1 
    class="label" 
    [class.label-warning]="yourName=='Daniel'" 
    [class.label-success]="yourName!='Daniel'"> 

Answer 2

あなたは条件付きでこのような必要なラベルクラス（例えばlabel-success）追加することができます。

<h1 *ngIf="yourName" class="label" 
[class.label-warning]="yourName != 'Daniel'" 
[class.label-success]="yourName=='Daniel'"> 
    Hello {{yourName}}! 
</h1> 

を

デフォルトではlabelのクラスがあり、条件に応じて追加のクラスを追加します。