角4+ ngClass混合式

Question

ngClassに2つの値を渡そうとしています。

あなたはこれを行うにはどうすればよい：

[ngClass]="'cssprefix-' + var.value, {'newclass' : ifTrue}" 

Answer 1

あなたは可能性が内部で論理演算子やその他の条件を実行することができますコントローラのメソッドに追加するクラスを記述するロジックを移動します。

// controller 
getClasses(ifTrue: boolean, value: string) { 
    const ret = {}; 
    ret['cssprefix-' + value] = true; 
    ret['newclass'] = ifTrue; 

    return ret; 
} 

// in template 
[ngClass]="getClasses(ifTrue, var.value)" 

また、にバインドすることもできますは直接属性：

[class]="'cssprefix-' + var.value" [ngClass]="{'newclass' : ifTrue}" 

や使用文字列補間：

class="{{ 'cssprefix-' + var.value }}" [ngClass]="{'newclass' : ifTrue}" 

Answer 2

[ngClass]は、オブジェクトを受け取り、スタイルのためにそれを解析します。だからあなたの二つの値は、左

[ngClass]="{'cssprefix-' + var.value: ! ifTrue, 'newclass' : ifTrue}" 

リトルモア情報で以下のようにオブジェクトおよび対応するクラス内で渡されます： また[ngClass]

[ngClass]="{'someCondClass': ifTrue && (somethingElse || anotherCondition)}" 

Answer 3

編集新しい回答：私の昔の答えで
ngClass "は文字通り、CSSクラスとして"" "Cのように" Cを取っていましたc "である。しかしこれはうまくいくようです。

<div [class]="'csspefix-' + cssSuffix.value" [ngClass]="{ 'newclass' : ifTrue}"></div> 

旧回答：私の例では
パーサがvarキーワードを好きではなかったので、私はcssSuffixにvarの名前を変更しました。

<div *ngIf="'csspefix-' + cssSuffix.value as c" [ngClass]="{ c: true, 'newclass' : ifTrue}"></div> 

これは私がそれをパーサbecuase仕事を得ることができる唯一の方法はngClassにおけるオブジェクト式の財産側に「+」が好きか「（」しませんでした。