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

Question

我正在尝试按照展示如何在单击组件时将 class 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(...) 方法，此刻我注释掉了它的所有内容。该错误似乎完全与标记有关（除非我需要在组件中声明一些额外的东西，例如数组等）。至少到目前为止，我在谷歌搜索这个问题时看到了这些例子。

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"

Answer 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>

Answer 3

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

这是正确的语法

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

Can't assign [ngClass] to Angular components generated by *ngFor loop

css

ngfor

angular