Angular 2 einen Mehrwert zu ngClass mit Interpolation

Question

Lets sagen, dass ich einige Objekte in einem Array (lässt die Array "Elemente" nennen) wie { title: "Title", value: true } und ich verwende ngFor sie angezeigt werden mag:

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

Jetzt Nehmen wir an, ich möchte eine Klasse auf der h1 basierend darauf anzeigen, ob item.value wahr oder falsch ist. Wie kann ich das tun?

Ich kann [class.some-class]="{{ item.value }}" nicht hinzufügen. Wie kann ich den wahren oder falschen Wert für das aktuelle Element in etwas wie ngClass bekommen? Fehle ich einen offensichtlichen Weg, dies in Angular 2 zu tun?

(Btw, ich weiß, ich es durch Zugabe von class="{{ item.value | pipe }}" zum h1 und kochend den Wert und die Rücksendung der richtige Klasse tun können auf der Grundlage der Werte wahr und falsch, aber es scheint, wie es sollte einen besseren Weg geben.)

Dank

Answer 1

Sie können eine bedingte Klasse wie folgt hinzu:

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

Denken Sie daran, dass die *ngFor Syntax erweitert tatsächlich in eine template. In Ihrem Beispiel wäre es erweitern in:

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

Wenn Sie es erweitert sehen, können Sie sehen, warum Sie die [class.xyz] Direktive mit einer Vorlage Eingangsgröße der item zu verwenden, sind in der Lage.

Answer 2

Sie sollten es nicht interpolieren. Lassen Sie einfach die {{}} aus. Dies interpoliert es zu einer Zeichenkette. die heraus verlassen werden Sie den boolean-Wert, der für [class.some-class]

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

Andere Optionen

Sie auch Objekt-Notation perfekt gültig ist von der Komponente entweder inline oder genommen verwenden können, wenn Sie ein paar verschiedene Klassen haben . Grundsätzlich ist die Eigenschaft ist die CSS-Klasse, und der Wert ist die wahr/falsch

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

Oder bekommen Sie das Objekt von der Komponente

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

[ngClass]="getClasses(value)" 

Siehe auch

• Template Syntax: NgClass

Answer 3

Sie können i Benennen und verwenden Sie ngClass in h1 tag.

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

Answer 4

Wenn Sie item.value direkt verwenden möchten. Ein boolescher Wert sein. Verwendung:

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

Wenn Sie eine Funktion auswerten wollen, die direkt einen boolean stattdessen einen Booleschen Wert zurückgibt.Zum Beispiel bewerten, wenn der Wert der gewünschte Zeichenfolge ist:

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

Wesen:

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