web-dev-qa-db-ja.com

Angular 2補間を使用してngClassに値を追加します

{ title: "Title", value: true }のような配列（配列を「アイテム」と呼びましょう）にいくつかのオブジェクトがあり、ngForを使用して次のように表示するとします。

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

ここで、item.valueがtrueかfalseかに基づいて、h1にクラスを表示するとします。どうやってやるの？

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

（ところで、h1にclass="{{ item.value | pipe }}"を追加し、値をパイピングして、trueとfalseの値に基づいて正しいクラスを返すことでそれができることはわかっていますが、もっと良い方法があるはずです。）

ありがとう

angularng-class
8
user5021816

次のような条件付きクラスを追加できます。

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

*ngFor構文は実際にはtemplateに展開されることに注意してください。あなたの例では、次のように展開されます。

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

展開されているのを見ると、itemのテンプレート入力変数で[class.xyz]ディレクティブを使用できる理由がわかります。

6
WiredPrairie

動的値にngClassを使用する（dynamicValueはコンポーネント内の@Input（）にすることができます）：

<div [ngClass]="[dynamicValue]"></div>

複数の値に使用することもできます。

<div [ngClass]="[dynamicValue, secondDynamicValue, thirdDynamicValue]"></div>

場合によっては、動的な値を条件付きクラスと組み合わせたいことがあります。これは次のように実行できます。

<div [ngClass]="[dynamicValue, (isRounded ? 'rounded' : '')]"></div>

これにより、動的な値のクラス名が適用され、isRoundedがtrueの場合は、条件付きで「丸められた」クラスも適用されます。

3
Shahar

あなたはそれを補間するべきではありません。 {{}}は省略してください。これにより、文字列に補間されます。それらを除外すると、ブール値が得られます。これは、[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)"

関連項目

2
Paul Samsotha

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;
}
0
Sam

H1タグでngClassを繰り返し使用できます。

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