ngClass中的多个类

Question

我正在尝试在*ngClass中添加多个值,以前用于以前的alpha版本,现在似乎不适用于angular2 beta:

<i *ngClass="['fa','fa-star']"></i>

它会产生错误:

EXCEPTION:TypeError:在PostView @ 30:27中的[['fa','fa-star']中无法读取未定义的属性'add'

我在这里错过了什么？

Answer 1

您应该使用方括号来创建属性绑定.看到这个插件

<i [ngClass]="['fa','fa-star']"></i>

Answer 2

如果您不打算动态更改这些类,那么使用ngClass是过度的.您只需class="fa fa-star"在模板中使用即可.

ngClass当您想要动态打开和关闭它们时,应该使用它们.文档中有一个例子:

您的组件将有一个方法:

setClasses() {
  return {
    saveable: this.canSave,      // true
    modified: !this.isUnchanged, // false
    special: this.isSpecial,     // true
  }
}

然后ngClass在你的模板中使用如下:

<div [ngClass]="setClasses()">This div is saveable and special</div>

Answer 3

您还可以构建包含多个类的字符串.

在这种情况下,additionalClass是包含classname的@Input var,active是一个设置活动类的boolean

<div [ngClass]="(additionalClass + ' ' + (active ? 'active' : ''))"></div>