ich mehrere Werte in * ngClass hinzufügen bin versucht, was früher auf früheren Alpha-Releases arbeiten und scheint nicht jetzt auf angular2 Beta zu arbeiten:Mehrere Klassen in ngClass
<i *ngClass="['fa','fa-star']"></i>
Es erzeugt einen Fehler :
EXCEPTION: TypeError: Cannot read property 'add' of undefined in [['fa','fa-star'] in [email protected]:27]
Was fehlt mir hier?
Sie sollten eckige Klammern verwenden, um eine Eigenschaftsbindung zu erstellen. Siehe this plunk
<i [ngClass]="['fa','fa-star']"></i>
Wenn Sie nicht dynamisch ändernden diese Klassen zu gehen, dann mit ngClass trieben. Sie können einfach class="fa fa-star" in Ihrer Vorlage verwenden.
ngClass sollte verwendet werden, wenn Sie diese dynamisch ein- und ausschalten möchten. Es gibt ein Beispiel in der Dokumentation:
Ihre Komponente ein Verfahren würde:
setClasses() {
return {
saveable: this.canSave, // true
modified: !this.isUnchanged, // false
special: this.isSpecial, // true
}
}
dann ngClass in Ihrer Vorlage verwenden wie so:
<div [ngClass]="setClasses()">This div is saveable and special</div>
Ich habe sie dynamisch geändert, aber deine Lösung ist wirklich interessant. – Sagi
Ok, aber wie planen Sie, sie zu ändern, wenn Sie das Array hart in ngClass codiert haben? – Zyzle
Ich vereinfachte das Beispiel in Frage. In meinem realen Fall verwende ich dynamische Klassen, die von einer Komponentenmethode zurückgegeben werden. – Sagi
Sie können auch einen String mit mehreren Klassen bauen .
In diesem Fall additionalClass ist ein @Input var den Klassennamen und aktiv ist ein boolean enthält, die die aktive Klasse
<div [ngClass]="(additionalClass + ' ' + (active ? 'active' : ''))"></div>
setzt Wie ändern Sie diese Klassen dynamisch, wenn Sie das Array sind die Bereitstellung in deiner Vorlage? – Zyzle
@Zyzle Ich würde eine Variable für dieses Array erstellen und es von meiner Komponente ändern (zum Beispiel '[ngClass] =" myDynamicArray "'). – alexpods
Ich würde die Antwort dann aktualisieren, wie ich darauf hingewiesen habe, ist das ursprüngliche Beispiel nicht anders als einfach zu tun "class =" fa fa-star "' in der Vorlage – Zyzle