Question

我试图在特定条件下使用ngclass设置类。

我试过了：

 [ngClass]="{'warnColor gray1':alerts[0].error==0,'warnColor red':alerts[0].error!=0}"

但奇怪的是，当应用左条件时，只有灰色打印到跨度中。

所以跨度看起来像这样

<span class="gray1" ng-reflect-ng-class="[object Object]"></span>

我知道我可以使用其他condtion（？:)但是这个语法出了什么问题？

Answer 1

使用[ngClass]="{'warnColor gray1': alerts[0].error == 0, 'warnColor red': alerts[0].error != 0}"时，会调用ngClass指令。以下是source code供参考。

private _toggleClass(klass: string, enabled: any): void {
    klass = klass.trim();
    if (klass) {
        klass.split(/\s+/g).forEach( klass => { this._renderer.setElementClass(this._ngEl.nativeElement, klass, !!enabled); });
    }
}

该指令的_toggleClass方法实际上删除并设置了元素上的类。在你的情况下，它被调用两次。

第一次： klass为warnColor gray1，enabled为true，条件为真

这会在元素上设置两个类，如果在_toggleClass方法中设置断点，则可以看到实际上warnColor和gray1类都应用于元素。

第二次： klass为warnColor red，enabled为false，条件评估为false

这会删除元素中的两个类，即warnColor和red，现在warnColor类已在第一步中应用但现在它已被删除，所以最后你最终只有班gray1。

所以我推荐这种语法用于公共类：

<div class="warnColor" [ngClass]="{'gray1': alerts[0].error == 0, 'red': alerts[0].error != 0}">
    Some html
</div>

Answer 2

您可以使用三元运算符

<span [ngClass]="alerts[0].error == 0 ? 'warnColor gray1' : 'warnColor red'"></span>

我不知道为什么你的语法不起作用，似乎是正确的。 Angular似乎在后面做了一些事情，也许他们尝试将camelCase格式化为其他东西，因为将warnColor更改为warn-color会使您的语法正常工作

[ngClass]="{'warn-color gray1':alerts[0].error==0,'warn-color red':alerts[0].error!=0}"

带有多重类的角度为2的ngclass条件

2 个答案: