は、複数のクラスの条件のために[ngClass] Angular4

Question

を使用する方法現在、私のdiv要素は次のようになります。

は

<div class="class-a" [ngClass]="{'class-b': !person.something}"> 

は今、私は別の条件を持つようにしたい...そう

今私はこれがためにDIVたいですクラス-aの場合クラス-bの場合その他のクラス-c

どうすればよいですか？角度4.

感謝を使用して

イム！

Answer 1

オブジェクトリテラルにプロパティのようにそれを追加します。

[ngClass]="{'class-b': !person.something, 'other-condition': isOther }" 

Answer 2

別のオプションを使用すると、より複雑なロジックを必要とするか、一つだけあるだろう知っていると思う場合は、コンポーネントからの文字列を返すことです。これはもっとテスト可能かもしれません。クラスとしてレンダリングされるどのような文字列あなたが返す

（ES）

[ngClass]="renderClass()" 

renderClass() { 
    switch(this.user.theme){ 
    case "dark": 
     return "dark-theme" 
    case "light": 
     return "light-theme" 
    } 
}