Nom de classe dynamique dans ngClass dans angular 2

Question

J'ai besoin d'interpoler une valeur à l'intérieur d'un ngClass expression, mais je ne peux pas le faire fonctionner.

J'ai essayé ces solutions, qui sont les seules qui fait sens pour moi, ces deux échoue avec l'interpolation:

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

Celui-ci fonctionne avec l'interpolation, mais ne parvient pas à l'ajouter dynamiquement classe parce que l'ensemble de la chaîne est ajoutée en tant que classe:

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

Donc ma question est de savoir comment vous utilisez les noms de classe dynamique en ngClass comme cela?

Answer 1

Essayez

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

au lieu de cela.

ou

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

ou même

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

va fonctionner, mais l'avantage supplémentaire de l'utilisation de ngClass est qu'il n'écrase pas les autres classes qui sont ajoutés par toute autre méthode( par exemple: [class.xyz] directive ou class d'attribut, etc.) en tant que class .

---

ngClass prend trois types d'entrées

• Objet: chaque touche correspond à un nom de classe CSS, vous ne pouvez pas avoir de clés dynamiques, car key 'key' "key" sont tous les mêmes, et [key] n'est pas pris en charge autant que je sache.
• Tableau: ne peut contenir la liste des classes, pas de conditions, bien que l'opérateur ternaire œuvres
• Chaîne/ l'expression: tout comme attribut de classe normale

Answer 2

Celui-ci devrait travailler

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

mais Angulaire jette sur cette syntaxe. Je considère que c'est un bogue. Voir aussi https://stackoverflow.com/a/36024066/217408

Les autres ne sont pas valides. Vous ne pouvez pas utiliser [] avec {{}}. Soit l'un ou l'autre. {{}} lie le résultat stringified qui ne conduit pas au résultat souhaité dans ce cas, car un objet doit être transmis à l' ngClass.

Plunker exemple

Comme solution de contournement de la syntaxe indiquée par @A_Sing ou

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

peut être utilisé.