ngClass中的动态类名,角度为2

Question

我需要在ngClass表达式中插入一个值,但我不能让它工作.

我试过这些解决方案,这是唯一对我有意义的解决方案,这两个解决方案都失败了:

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

这个与插值一起使用但是由于整个字符串被添加为类而失败了动态添加的类:

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

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

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有三种类型的输入

• 对象:每个键对应一个CSS类名,你不能拥有动态键,因为key 'key' "key"它们都是相同的,并且[key]不支持AFAIK.
• 数组:虽然三元运算符有效,但只能包含类列表,没有条件
• String/expression:就像普通的class属性一样

Answer 2

这应该工作

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

但Angular会抛出这种语法.我认为这是一个错误.另请参见/sf/answers/2521684651/

其他人无效.你不能[]一起使用{{}}.一个或另一个.{{}}在这种情况下绑定结果字符串,这不会导致所需的结果,因为需要传递一个对象ngClass.

Plunker的例子

解决方法@A_Sing或者显示的语法

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

可以使用.

Answer 3

基本上是其他答案的重复 - 但我没有完全明白。也许现在有人终于通过这个例子明白了。

[ngClass]="['svg-icon', 'recolor-' + recolor, size ? 'size-' + size : '']"

将导致例如

class="svg-icon recolor-red size-m"

Answer 4

这非常有效！

<div [class.any-class]="condition"></div>

例子：

<div [class.hide]="user.isPaid()"></div>

Answer 5

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