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

Question

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

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

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

Uncaught Error: Template parse errors:
Parser Error: Unexpected token ':' at column 9 in ['active':menu.active] in ng:///AppModule/NavigatorComponent.html@11:9 ("
[id]="menu.id"
(click)="onClick($event,menu.link)"
[ERROR ->][ngClass]="'active':menu.active"
class="navigator">
{{menu.title}}
"): ng:///AppModule/NavigatorComponent.html@11:9

我错过了什么？

Answer 1

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

用户要么对象字面量语法

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

或字符串语法

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

或

[class.active]="menu.active"