Dynamischer Klassenname in ngClass in angular 2

Question

Ich muss einen Wert innerhalb eines ngClass Ausdrucks interpolieren, aber ich kann es nicht zum Laufen bringen.

ich diese Lösung versucht, die die einzigen sind, die für mich Sinn macht, diese beiden nicht mit der Interpolation:

<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button> 
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button> 

Dieses mit der Interpolation funktioniert aber nicht mit der dynamisch hinzugefügt Klasse, weil die gesamte Zeichenfolge wird als eine Klasse hinzugefügt:

<button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button> 

Also meine Frage ist, wie Sie dynamische Klassennamen in ngClass wie diese verwenden Sie?

Answer 1

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button> 

Versuchen.

oder

<button [ngClass]="[type === 'mybutton' ? namespace + '-mybutton' : '']"></button> 

oder sogar

<button class="{{type === 'mybutton' ? namespace + '-mybutton' : ''}}"></button> 

arbeiten aber zusätzlicher Nutzen ngClass der Verwendung ist, dass es nicht andere Klassen nicht überschreiben, die von keinem anderen Verfahren hinzugefügt werden (zB : [class.xyz] Direktive oder class Attribut, etc.) wie class tut.

---

ngClass nimmt drei Arten von Eingangs

• Objekt: entspricht jede Taste einer CSS-Klassennamen, können Sie keine dynamische Schlüssel haben, weil key'key'"key" sind alle gleich, und [key] wird nicht unterstützt AFAIK.
• Array: kann nur Liste der Klassen enthalten, keine Bedingungen, obwohl ternäre Operator
• String/Ausdruck funktioniert: wie normale Klassenattribut

Answer 2

sollte Dieses

<button [ngClass]="{[namespace + '-mybutton']: type === 'mybutton'}"></button> 

arbeiten, aber Angular wirft auf dieser Syntax. Ich würde dies als einen Fehler betrachten. Siehe auch https://stackoverflow.com/a/36024066/217408

Die anderen sind ungültig. Sie können [] zusammen mit {{}} nicht verwenden. Entweder das eine oder das andere. {{}} bindet das Ergebnis stringified, das in diesem Fall nicht zum gewünschten Ergebnis führt, da ein Objekt an ngClass übergeben werden muss.

Plunker example

Als Abhilfemaßnahme verwendet werden, die Syntax dargestellt durch @A_Sing oder

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button> 

kann. Statt