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绑定的文档.

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

希望这有帮助!