Nome di class dinamico all’interno di ngClass in angular 2

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

Ho provato queste soluzioni che sono le uniche che hanno senso per me, queste due non riescono con l’interpolazione:

   

Questo funziona con l’interpolazione ma fallisce con la class aggiunta dynamicmente perché l’intera stringa viene aggiunta come class:

  

Quindi la mia domanda è: come usi ngClass di ngClass dinamici in ngClass come questo?

Provare

  

anziché.

o

  

o anche

  

funzionerà, ma l’ulteriore vantaggio dell’uso di ngClass è che non sovrascrive altre classi aggiunte da altri metodi (ad es [class.xyz] direttiva [class.xyz] o attributo di class , ecc.) come fa la class .


ngClass accetta tre tipi di input

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

Questo dovrebbe funzionare

  

ma Angular getta su questa syntax. 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 stringificato che non porta al risultato desiderato in questo caso perché un object deve essere passato a ngClass .

Esempio di Plunker

Come soluzione alternativa, la syntax mostrata da @A_Sing o

  

può essere utilizzata.