Angular2 [ngClass]条件引导样式被切断

Question

我不能使Angular2使用条件ngClass样式和引导程序标签.

<h1 [ngClass]="{'label label-warning': yourName=='Daniel', 
                'label label-success': yourName!='Daniel'}">

'label label-success'当我设置我的应用程序样式时,ngClass似乎正在删除第一个"标签" .当满足第二个条件时它正确地设置样式,但是当满足第一个条件时,样式是不正确的.

在检查元素时,当满足第二个条件时,样式是h1.label.label-success,但是当满足第一个条件时,它被错误地定型为h1.label-error.

请参阅此plunker以了解错误.

我已经按照AngularJS升级指南(https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html)进行了操作,但无法使其正常工作

Answer 1

我想[ngClass]你可以在单个对象键中传递一个单一的名字.因此,使用简单的方法将您固定的公共类直接放在html类中,class="label"并仅在内部添加条件类[ngClass]

<h1
    class="label"
    [ngClass]="{'label-warning': yourName=='Daniel','label-success': yourName!='Daniel'}">

您也可以使用angular 2样式类 [class.classname]="condtionexpression"

<h1
    class="label"
    [class.label-warning]="yourName=='Daniel'"
    [class.label-success]="yourName!='Daniel'">