Question

我试图按照an example显示如何在单击某个组件时将活动绑定到该组件。当我根据下面的标记执行代码时

<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这个问题时看到的例子而言。

未捕获错误：模板解析错误：
  分析器错误：意外的令牌＆＃39;：＆＃39;在第9页的[＆＃39;有效＆＃39;：menu.active]中的ng：///AppModule/NavigatorComponent.html@11：9（＆＃34;
           [ID] =＆＃34; menu.id＆＃34;
           （点击）=＆＃34;的onClick（$事件，menu.link）＆＃34;
           [错误 - ＆gt;] [ngClass] =＆＃34;＆＃39;有效＆＃39;：menu.active＆＃34;
           类=＆＃34;导航＆＃34;＆GT;
        {{menu.title}}
  ＆＃34;）：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ünterZö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组件

3 个答案: