ngClass 中的多个类答案

【问题标题】：Multiple classes in ngClassngClass 中的多个类
【发布时间】：2015-12-29 20:04:23
【问题描述】：

我正在尝试在 *ngClass 中添加多个值，这在以前的 alpha 版本中可以使用，而现在在 angular2 beta 中似乎无法使用：

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

它会产生错误：

异常：类型错误：无法读取未定义的属性“添加” [['fa','fa-star'] in PostView@30:27]

我在这里错过了什么？

【问题讨论】：

标签： angular ng-class

【解决方案1】：

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

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

【讨论】：

如果您在模板中提供数组，如何动态更改这些类？
@Zyzle 我会为这个数组创建一些变量并从我的组件中更改它（例如[ngClass]="myDynamicArray"）。
然后我会更新答案，正如我所指出的，原始示例与在模板中简单地执行 class="fa fa-star" 没有什么不同
@Zyzle 我认为没有必要这样做。问题在于对属性绑定使用不正确的语法。而且您已经在答案中指定了class="fa fa-star"。

【解决方案2】：

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

在这种情况下，additionalClass 是一个包含类名的@Input var，active 是一个设置活动类的布尔值

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

【讨论】：

【解决方案3】：

如果您不打算动态更改这些类，那么使用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>

【讨论】：

我正在动态更改它们，但是您的解决方案真的很有趣。
好的，但是如果您将数组硬编码到 ngClass 中，您打算如何更改它们？
我简化了有问题的示例。在我的真实案例中，我使用从组件方法返回的动态类。
在您的解决方案中，setClasses() 将在每次更改检测时被调用，从而每次都创建一个新对象。我强烈建议不要这样做。最好直接在视图模板中定义对象：[ngClass]="{ saveable: this.canSave, modified: !this.isUnchanged, special: this.isSpecial }"。有关此主题，另请参阅 one of many blogposts。