Nome classe dinamico all'interno di ngClass in angular 2

Ho bisogno di interpolare un valore all'interno di ngClassun'espressione ma non riesco a farlo funzionare.

Ho provato queste soluzioni che sono le uniche che per me hanno senso, queste due falliscono con l'interpolazione:

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

Questo funziona con l'interpolazione ma fallisce con la classe aggiunta dinamicamente perché l'intera stringa viene aggiunta come classe:

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

Quindi la mia domanda è come usi i nomi di classe dinamici in ngClassquesto modo?

Provare

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

anziché.

o

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

o anche

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

funzionerà ma un ulteriore vantaggio dell'utilizzo di ngClass è che non sovrascrive altre classi che vengono aggiunte da qualsiasi altro metodo (ad esempio: [class.xyz]direttiva o classattributo, ecc.) comeclass fa.

Aggiornamento angolare 9

Il nuovo compilatore, Ivy, offre maggiore chiarezza e prevedibilità su ciò che accade quando ci sono diversi tipi di associazioni di classe sullo stesso elemento. Per saperne di più qui.

ngClass accetta tre tipi di input

• Oggetto: ogni chiave corrisponde a un nome di classe CSS, non puoi avere chiavi dinamiche, perché key 'key' "key"sono tutte uguali e [key]non è supportata AFAIK.
• Vettore: può contenere solo un elenco di classi, nessuna condizione, sebbene l'operatore ternario funzioni
• Stringa / espressione: proprio come il normale attributo di classe

Questo dovrebbe funzionare

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

ma Angular getta su questa sintassi. Lo considererei un bug. Vedi anche https://stackoverflow.com/a/36024066/217408

Gli altri non sono validi. Non puoi usare []insieme a {{}}. O l'uno o l'altro. {{}}lega il risultato in stringa che non porta al risultato desiderato in questo caso perché un oggetto deve essere passato a ngClass.

Esempio di Plunker

Come soluzione alternativa, la sintassi mostrata da @A_Sing o

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

può essere utilizzato.

Ecco un esempio di qualcosa che sto facendo per più classi con più condizioni :

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

dove:
classes è un oggetto contenente stringhe di vari nomi di classi. per esempioclass.icon.large = "app__icon--large"

È dinamico! Aggiornamenti con l'aggiornamento delle condizioni.

Voglio menzionare alcuni punti importanti da tenere a mente durante l'implementazione dell'associazione di classi.

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

class qui non è vincolante correttamente perché una condizione deve essere soddisfatta, mentre hai due classi identiche "badge-warning" che possono avere due condizioni diverse. Per correggere questo

 [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>

Puoi usare <i [className]="'fa fa-' + data?.icon"> </i>