Question

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

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

ngClass似乎是在为我的应用设置样式时从'label label-success'删除第一个“标签”。当满足第二个条件时它正确地设置样式，但是当满足第一个条件时，样式是不正确的。

在检查元素时，当满足第二个条件时，样式为h1.label.label-success，但是当满足第一个条件时，它的样式不正确为h1.label-error。

请参阅此plunker了解错误。

https://plnkr.co/edit/qJLWBzCXXUn7hNKEWXIs?p=preview

我遵循了AngularJS升级指南（https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html），但无法正常使用

Answer 1

我认为在[ngClass]中你可以在单个对象键中传递一个单独的类名。因此，只需使用class="label"将您固定的公共类放在直接的html类中，并仅在[ngClass]内添加有条件的类

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

此外，您可以使用角度2样式类[class.classname]="condtionexpression"

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

Answer 2

您可以有条件地添加所需的标签类（例如label-success），如下所示：

<h1 *ngIf="yourName" class="label" 
[class.label-warning]="yourName != 'Daniel'"
[class.label-success]="yourName=='Daniel'">
    Hello {{yourName}}!
</h1>

默认情况下它有一个label类，然后根据你的条件追加附加类。

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

2 个答案: