javascript - ngClass在angular 4中不起作用

ngClass指令产生以下错误

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'li'.

代码段。

 <li [ngClass]="{'active':true}"><a href="">Home</a></li>

注意：我已经导入了通用模块

import {CommonModule} from "@angular/common"

库版本angular 4.0.1

最佳答案

如@Nedim所建议，如果在功能模块中使用[ngClass]，则需要确保将CommonModule添加到imports: []的@NgModule({})数组属性中：

import {CommonModule} from "@angular/common"

@NgModule({
    imports: [CommonModule]
})
export class SomeModule {}

为了有条件地基于布尔值/表达式添加单个类，我建议您使用语法[class.someClass]="condition"。这是Class binding的文档。

<li [class.active]="true"><a href="">Home</a></li>

例如，要根据布尔类属性进行评估，以有条件地应用“活动” CSS类：

TS：

export class App {
  foo: boolean = true;
}

HTML：

<div [class.active]="foo">Foobar</div>

这是plunker演示实际功能的地方。

注意：如果您尝试应用与路由器相关的某种活动样式，则可以使用RouterLinkActive绑定。当用户激活路径“ / heroes”时，以下示例将应用CSS类“ active”。

<a routerLink="/heroes" routerLinkActive="active">Heroes</a>

希望有帮助！

关于javascript - ngClass在angular 4中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44344148/