ngClass 中的多个类

Question

我正在尝试在 *ngClass 中添加多个值，这些值过去在以前的 alpha 版本中有效，但现在似乎在 angular2 beta 中无效：

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

产生错误：

EXCEPTION: TypeError: Cannot read property 'add' of undefined in [['fa','fa-star'] in PostView@30:27]

我在这里错过了什么？

Answer 1

您应该使用方括号来创建属性绑定。参见 this plunk

<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

您还可以构建一个包含多个 classes 的字符串。

在这种情况下，additionalClass 是一个包含 classname 的 @Input 变量，而 active 是一个设置活跃 class

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

ngClass 中的多个类

Multiple classes in ngClass

ng-class

angular

ngClass 中的多个 类

Multiple classes in ngClass

ng-class

angular

ngClass 中的多个类