ngClassの複数の条件 - 角度4

Question

ngClassに複数の条件を使用するにはどうすればよいですか？例：

<section [ngClass]="[menu1 ? 'class1' : '' || menu2 ? 'class1' : '' || (something && (menu1 || menu2)) ? 'class2' : '']"> 

このようなもの。私は2つのメニューのために同じクラスを持っています、そして、それらのメニューの1つが真であり、何かが真であるときに私はクラスが必要です。私は十分に説明願って

Answer 1

あなたはngClassに配列を代入しようとしているが、あなたは区切るため、配列要素の構文は、間違っています,の代わりに||と入力します。

これを試してみてください：

<section [ngClass]="[menu1 ? 'class1' : '', menu2 ? 'class1' : '', (something && (menu1 || menu2)) ? 'class2' : '']"> 

また、これは動作するはずです：

<section [ngClass.class1]="menu1 || menu2" [ngClass.class2] = "(menu1 || menu2) && something">  

Answer 2

あなたは必要なオブジェクト表記

<section [ngClass]="{'class1':condition1, 'class2': condition2, 'class3':condition3}" > 

REF：https://angular.io/api/common/NgClass

Answer 3

<section [ngClass]="{'class1':expression1, 'class2': expression2, 
'class3':expression3}"> 

は、クラス名の周りの単一引用符を追加することを忘れないでください。

Answer 4

私はこの同様の問題がありました。私は、複数の表現を見てクラスを設定したかったのです。 ngClassは、コンポーネントコード内のメソッドを評価して、何をすべきかを伝えることができます。

だから、内部* ngFor：

<div [ngClass]="{'shrink': shouldShrink(a.category1, a.category2), 'showAll': section == 'allwork' }">{{a.listing}}</div> 

そして

コンポーネント内部：ここ

section = 'allwork'; 

shouldShrink(cat1, cat2) { 
    return this.section === cat1 || this.section === cat2 ? false : true; 
} 

私は2つの異なるカテゴリが一致した場合、私は上のベースのdivを縮小する必要がある場合を計算するために必要なもの選択されたカテゴリはです。そして、それは動作します。 そこから、[ngClass]に対して、入力に応じてメソッドが返す値に基づいてtrue/falseをコンピュータに入力できます。

Answer 5

同じロジックを書き込む方法は複数あります。前述のように、オブジェクトの表記法や単純な式を使用することができます。しかし、私はあなたがHTMLでそのような多くのロジックをすべきではないと思います。テストして問題を見つけるのが難しい。ゲッター関数を使用してクラスを割り当てることができます。

インスタンスの場合。

public getCustomCss() { 
    //Logic here; 
    if(this.x == this.y){ 
     return 'class1' 
    } 
    if(this.x == this.z){ 
     return 'class2' 
    } 
} 
<!-- HTML --> 
<div [ngClass]="getCustomCss()"> Some prop</div> 

//OR 

get customCss() { 
    //Logic here; 
    if(this.x == this.y){ 
     return 'class1' 
    } 
    if(this.x == this.z){ 
     return 'class2' 
    } 
} 
<!-- HTML --> 
<div [ngClass]="customCss"> Some prop</div>