web-dev-qa-db-fra.com

Nom de classe dynamique dans ngClass dans angular 2

J'ai besoin d'interpoler une valeur dans une expression ngClass mais je ne parviens pas à la faire fonctionner.

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

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

Celui-ci fonctionne avec l'interpolation mais échoue avec la classe ajoutée dynamiquement car toute la chaîne est ajoutée en tant que classe:

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

Ma question est donc la suivante: comment utilisez-vous les noms de classe dynamiques dans ngClass comme ceci?

angular
76
Chrillewoodz

Essayer 

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

au lieu.

ou

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

ou même

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

fonctionnera mais l’avantage supplémentaire d’utiliser ngClass est qu’il n’écrasera pas les autres classes ajoutées par une autre méthode (par exemple: directive [class.xyz] ou attribut class, etc.) comme le fait class.

ngClass prend trois types d'entrées

  • Object: chaque clé correspond à un nom de classe CSS, vous ne pouvez pas avoir de clé dynamique, car key'key'"key" sont tous identiques, et [key] n'est pas pris en charge autant que je sache.
  • Array: peut uniquement contenir une liste de classes, aucune condition, bien que l'opérateur ternaire fonctionne
  • String/expression: comme l'attribut de classe normale
128
Ankit Singh

Celui-ci devrait fonctionner

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

mais Angular jette sur cette syntaxe. Je considérerais cela comme un bogue .. Voir aussi https://stackoverflow.com/a/36024066/217408

Les autres sont invalides. Vous ne pouvez pas utiliser [] avec {{}}. Soit l'un soit l'autre. {{}} lie le résultat sous forme de chaîne ce qui ne conduit pas au résultat souhaité dans ce cas car un objet doit être passé à ngClass.

exemple Plunker

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

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

peut être utilisé.

11
Günter Zöchbauer

Voici un exemple de ce que je fais pour plusieurs classes avec plusieurs conditions :

[ngClass]="[variableInComponent || !anotherVariableInComponent ? classes.icon.large : classes.icon.small, editing ? classes.icon.editing : '']"

où:
classes est un objet contenant des chaînes de différents noms de classe. class.icon.large = "app__icon--large"

C'est dynamique! Mises à jour lorsque les conditions sont mises à jour.

0
ykadaru