Nome classe dinamico all'interno di ngClass in angular 2

Question

È necessario interpolare un valore all'interno di un'espressione ngClass ma non riesco a farlo funzionare.

ho provato queste soluzioni, che sono gli unici che ha senso per me, questi due non riesce con l'interpolazione:

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

Questo funziona con l'interpolazione, ma non riesce con la classe dinamicamente aggiunto perché l'intera stringa viene aggiunto come classe:

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

Quindi la mia domanda è: come si usa classnames dinamici in ngClass come questo?

Answer 1

Prova

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

invece.

o

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

o anche

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

funzionerà, ma ulteriore vantaggio di utilizzare ngClass è che non sovrascrive altre classi che vengono aggiunti con qualsiasi altro metodo (ad esempio, : [class.xyz] direttiva o attributo class, ecc. Come fa class.

---

ngClass prende tre tipi di input

• Oggetto: ad ogni tasto corrisponde un nome di classe CSS, non si può avere chiavi dinamiche, perché key'key'"key" sono tutti uguali, e [key] non è supportato AFAIK.
• Array: può contenere solo elenco delle classi, senza condizioni, anche se operatore ternario funziona
• String/espressione: proprio come attributo di classe normale

Answer 2

Questo dovrebbe funzionare

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

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

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

Plunker example

Come soluzione la sintassi mostrata da @A_Sing o

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

può essere utilizzato.