无法将 [ngClass] 分配给 *ngFor 循环生成的 Angular 组件答案

【问题标题】：Can't assign [ngClass] to Angular components generated by *ngFor loop无法将 [ngClass] 分配给 *ngFor 循环生成的 Angular 组件
【发布时间】：2018-01-29 05:19:34
【问题描述】：

我正在尝试关注an example，展示了如何在单击组件时将类active 绑定到组件。当我根据下面的标记执行代码时

<div *ngFor="let menu of menus;"
     [id]="menu.id"
     (click)="onClick($event,menu.link)"
     [ngClass]="'active':menu.active"
     class="navigator">
  {{menu.title}}
</div>

我收到以下错误。注意 - 组件中有 onClick(...) 方法，目前我注释掉了它的所有内容。该错误似乎完全与标记有关（除非我需要在组件中声明一些额外的东西，例如数组等）。至少就我在 googlearching 这个问题时看到的例子而言。

未捕获的错误：模板解析错误：
解析器错误：ng:///AppModule/NavigatorComponent.html@11:9 ("
[id]="menu.id"
(click)="onClick($event,menu.link)"
[错误 ->][ngClass]="'active':menu.active"
class="导航器">
{{menu.title}}
"): ng:///AppModule/NavigatorComponent.html@11:9

我错过了什么？

【问题讨论】：

标签： css angular ngfor

【解决方案1】：

'active':menu.active 不是有效的表达式。

使用对象文字语法

[ngClass]="{'active':menu.active}"

或字符串语法

[ngClass]="menu.active ? 'active' : null"

或

[class.active]="menu.active"

【讨论】：

【解决方案2】：

在这种情况下，另一种方法是使用 [class] 属性，因为它可能更简洁，正如@Günter Zöchbauer 指出的那样：

 <div *ngFor="let menu of menus;"
     [id]="menu.id"
     (click)="onClick($event,menu.link)"
     [class.active]="menu.active"
     class="navigator">
  {{menu.title}}
</div>

【讨论】：

嗯...坐和[ngClass]有什么关系？我们是在谈论不同的语法还是完全不同的方法？
效果一样，但比ngClass更简洁。 ngClass 用于更复杂的场景。
对不起，必须说，另一种方法:) 更容易编写和更短？

【解决方案3】：

[ngClass]="{'active':menu.active}"

这是正确的语法

【讨论】：