Nombre de clase dynamic dentro de ngClass en angular 2

Necesito interpolar un valor dentro de una expresión ngClass pero no puedo hacer que funcione.

Intenté con estas soluciones, que son las únicas que tienen sentido para mí, estas dos fallan con la interpolación:

   

Éste funciona con la interpolación pero falla con la clase añadida dinámicamente porque toda la cadena se agrega como clase:

  

Entonces mi pregunta es ¿cómo se usan ngClass clase dynamics en ngClass como este?

Tratar

  

en lugar.

o

  

o incluso

  

funcionará, pero el beneficio adicional de usar ngClass es que no sobrescribe otras clases que se agregan mediante cualquier otro método (por ejemplo: directiva [class.xyz] o atributo de class , etc.) como lo hace la class .


ngClass toma tres tipos de entrada

  • Objeto: cada tecla corresponde a un nombre de clase CSS, no puede tener teclas dinámicas, porque la key 'key' son todas iguales, y [key] no es compatible con AFAIK.
  • Array: solo puede contener una lista de clases, sin condiciones, aunque el operador ternario funciona
  • Cadena / expresión: al igual que el atributo de clase normal

Este debería funcionar

  

pero Angular arroja esta syntax. Consideraría esto un error. Ver también https://stackoverflow.com/a/36024066/217408

Los otros son inválidos. No puede usar [] junto con {{}} . Ya sea uno o el otro. {{}} vincula el resultado con cadena que no conduce al resultado deseado en este caso porque un objeto necesita pasar a ngClass .

Ejemplo de Plunker

Como solución, la syntax que se muestra con @A_Sing o

  

puede ser usado.