角2の加算値補間

Question

と私は{ title: "Title", value: true }のように（配列「アイテム」を呼び出すことができます）配列内のオブジェクトをいくつか持っていると私は同じようにそれらを表示するためにngForを使用して言うことができます：

今

<h1 *ngFor="let item of items">{{ item.title }}</h1>

item.valueがtrueまたはfalseの場合に基づいて、h1にクラスを表示するとします。 どうすればいいですか？

[class.some-class]="{{ item.value }}"を追加できません。基本的に、現在のアイテムの真偽値をngClassのようなものにするにはどうすればよいですか？ Angular 2でこれを行う明白な方法がないのですか？

（ところで、私はH1にclass="{{ item.value | pipe }}"を追加し、値をパイプし、真と偽の値に基づいて適切なクラスを返すことでそれを行うことができます知っているが、もっと良い方法があるはずのように思える。）

おかげ

Answer 1

あなたはこのように、条件クラスを追加することができます：

<h1 *ngFor="let item of items" 
    [class.some-class]="item.value === true"> 
    {{ item.title }} 
</h1> 

は*ngFor構文が実際にtemplateに展開することを忘れないでください。あなたはそれが拡大表示されたらあなたはitemのテンプレート入力変数と[class.xyz]ディレクティブを使用することができるしている理由は、あなたが見ることができる

<template ngFor let-item [ngForOf]="items"> 
    <h1 [class.some-class]="item.value === true"> 
     {{ item.title }} 
    </h1>  
</template> 

：あなたの例では、それはのように展開されます。

Answer 2

補間しないでください。 {{}}を省略してください。これは文字列に補間します。これらを省略すると、あなたは、いくつかの異なるクラスを持っている場合にも、インラインまたはコンポーネントから取ったいずれかのオブジェクトの表記を使用することができます[class.some-class]

[class.some-class]="item.value" 

その他のオプション

のために完全に有効であるブール値を与えます。基本的にプロパティは、CSSクラスで、値はtrue/falseの

[ngClass]="{'some-class': item.value }" 

それとも

getClasses(value) { 
    return { 'some-class': value } 
} 

[ngClass]="getClasses(value)" 

が

• Template Syntax: NgClass
関連項目コンポーネントからオブジェクトを取得することです

Answer 3

hateタグでngClassを使用します。

<h1 *ngFor="let item of items" [ngClass]="{'cssClass': item.value }">{{ item.title }}</h1> 

Answer 4

item.valueを直接使用する場合。ブール値になります。 用途：

[ngClass.class-you-want-add] = "item.value === true" 

あなたは直接代わりにブール値をブール値を返す関数を評価望む場合。値は、ご希望の文字列の場合たとえば、評価する：

[ngClass] = "{'class-you-want-add' : isValue("OneValue")}" 

ビーイング：

isValue(val:string) { 
    return this.item.value == val; 
}