ngClass未在角度4

Question

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" 

库版本4.0.1角

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

希望有帮助！