ngClass中的dynamic类名在angular2中

我需要插入ngClassexpression式内的值，但我不能得到它的工作。

我尝试了这些解决scheme，这些解决scheme对我来说是唯一有意义的，这两个解决scheme都失败了：

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

这一个与插值工作，但失败与dynamic添加类，因为整个string被添加为一个类：

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

所以我的问题是你如何在这样的ngClass使用dynamic类名？

Answer 1

尝试

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

代替。

要么

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

甚至

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

将工作，但使用ngClass额外的好处是，它不会像其他方法（如： [class.xyz]指令或class属性等）所增加的其他class一样。

---

ngClass需要三种types的input

• 对象：每个键对应一个CSS类的名称，不能有dynamic键，因为key 'key' "key"都是一样的， [key]不支持AFAIK。
• 数组：只能包含类的列表，没有条件，尽pipe三元运算符工作
• string/expression式：就像普通的类属性

Answer 2

这一个应该工作

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

但是Angular会抛出这个语法。 我会考虑这个错误。 另见https://stackoverflow.com/a/36024066/217408

其他人无效。 您不能将[]与{{}}一起使用。 无论是其中一个或另一个。 在这种情况下， {{}}绑定结果string，而不会导致所需的结果，因为需要将对象传递给ngClass 。

Plunker例子

解决方法是@A_Sing或

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

可以使用。