Nom de classe dynamique à l'intérieur de ngClass dans angular 2

J'ai besoin d'interpoler une valeur à l'intérieur d'une ngClassexpression mais je n'arrive pas à la faire fonctionner.

J'ai essayé ces solutions qui sont les seules qui me font sens, ces deux échouent à 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 la chaîne entière est ajoutée en tant que classe:

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

Ma question est donc de savoir comment utiliser les noms de classe dynamiques ngClasscomme ça?

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 de l'utilisation de ngClass est qu'il n'écrase pas les autres classes qui sont ajoutées par toute autre méthode (par exemple: [class.xyz]directive ou classattribut, etc.) comme le classfait.

Mise à jour Angular 9

Le nouveau compilateur, Ivy, apporte plus de clarté et de prévisibilité à ce qui se passe lorsqu'il existe différents types de liaisons de classe sur le même élément. En savoir plus ici.

ngClass prend trois types d'entrée

• Objet: chaque clé correspond à un nom de classe CSS, vous ne pouvez pas avoir de clés dynamiques, car elles key 'key' "key"sont toutes identiques, et [key]ne sont pas prises en charge AFAIK.
• Tableau: ne peut contenir que la liste des classes, aucune condition, bien que l'opérateur ternaire fonctionne
• Chaîne / expression: comme l'attribut de classe normal

Celui-ci devrait fonctionner

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

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

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

Exemple de Plunker

Pour contourner le problème, la syntaxe indiquée par @A_Sing ou

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

peut être utilisé.

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

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

où:
classesest un objet contenant des chaînes de différents noms de classe. par exempleclass.icon.large = "app__icon--large"

C'est dynamique! Mises à jour à mesure que les conditions se mettent à jour.

Je veux mentionner un point important à garder à l'esprit lors de la mise en œuvre de la liaison de classe.

    [ngClass] = "{
    'badge-secondary': somevariable  === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-success': somevariable  === value1 }" 

class ici ne lie pas correctement car une condition doit être remplie, alors que vous avez deux classes identiques 'badge-warning' qui peuvent avoir deux conditions différentes. Pour corriger cela

 [ngClass] = "{
    'badge-secondary': somevariable === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1 || somevariable  === value1, 
    'badge-success': somevariable  === value1 }" 

  <div *ngFor="let celeb of singers">
  <p [ngClass]="{
    'text-success':celeb.country === 'USA',
    'text-secondary':celeb.country === 'Canada',
    'text-danger':celeb.country === 'Puorto Rico',
    'text-info':celeb.country === 'India'
  }">{{ celeb.artist }} ({{ celeb.country }})
</p>
</div>

Vous pouvez utiliser <i [className]="'fa fa-' + data?.icon"> </i>