ng-class不能使用boolean属性

时间:2017-03-22 03:34:38

标签: angular

我有两个班级,header-large和'header-normal'。我希望能够基于我的组件上的布尔属性以编程方式在这些值之间切换。

我查看了ngClass文档,并尝试将这些属性添加到组件中:

public largeHead : boolean = false;
public normalHead : boolean = true;

然后使用ngClass:

<div id="header" ng-class="{'header-large': largeHead, 'header-normal': normalHead}" class="container-fluid text-center">

这不起作用。 ng-class语句只是以HTML格式输出,不添加任何类。

我也尝试过:

<div id="header" ng-class="{'header-large': 'largeHead == true', 'header-normal': 'normalHead == true'}" class="container-fluid text-center">

这也没有做任何事情。没有错误消息可以继续。

我看不出我做错了什么。我应该以不同的方式访问财产吗?

编辑:

没有解释ng-class。我试过了ng-class="{'header-large': true}"但它仍然不起作用。

为ng-class工作需要导入哪些模块?我看不到文档中列出的任何内容。

1 个答案:

答案 0 :(得分:0)

如果您正在进行Angular(v2 +),则语法为[ngClass]="..."。这些示例看起来像以前版本的AngularJS。

更新ngClass的Angular(v2 +)文档:https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html