Angular2：特定の条件で要素をクラスに追加/変更する方法

Question

AngularとSemantic-UIフレームワークを使用してWebアプリケーションを開発しています。特定の条件に要素にクラスを追加するための

は、私はすでに次の方法を使用しています

[class.className]='condition' 

は今、私は1人のクラス名以上のものを持っていると私はそれに対処する方法を見つけ出すことはできません。

このPlunkerに示すように、ngClassを使用しようとしました。 ご覧のとおり、このソリューションはまったく機能しません。

Plunkerを正常に動作させるにはどうすればいいですか？

Answer 1

[ngClass]を使用すると、いくつかのクラスを含む文字列を作成できます。この場合firstClassで

<div [ngClass]="('firstClass ' + (active ? 'secondClass' : ''))"></div> 

最初のクラスであり、活性はsecondClassクラスを設定するブール値です。

だから、あなたのケースでは、あなたのコードはなることができます：

<div class="field"> 
    <label for="name">Name:</label> 
    <div class="ui input" [ngClass]= "((myForm.controls.name.pending ? 'loading' : '') + 'secondClass')"> 
     <input id="name" [formControl]="myForm.controls.name"> 
    </div> 
</div> 

は、2つの連続したクラス間のスペースを提供することを忘れないでください。あなたのplunkerについては

EDIT

、あなたのようにngClassステートメントを追加するために持っている：

[ngClass]="[o.order === 'asc' ? 'chevron circle up': '' , o.order === 'desc' ? 'chevron circle down': '']" 

Answer 2

あなたはときに、あなたのテストの結果[ngClass]

<div class="field"> 
    <label for="name">Name:</label> 
    <div class="ui input" [ngClass]="{loading : myForm.controls.name.pending}"> 
     <input id="name" [formControl]="myForm.controls.name"> 
    </div> 
</div> 

を使用することができますtrueあなたのクラスにクラスを追加します。それ以外の場合はは、要素からを削除します