ngclass条件在角度2与多类

我想在特定条件下使用ngclass设置类。ngclass条件在角度2与多类

我尝试：

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

但奇怪当左条件是仅应用灰色印刷成的跨度。

这样的跨度是这样

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

我知道我可以使用别的condtion（？:)但什么是错这个语法？

来源

2017-07-03 baaroz

关于语法，它是正确的。你还可以描述警报的样子吗？ – trungk18

你尝试过[ngClass] =“{'warnColor gray1'：alerts [0] .error == 0，'warnColor'：alerts [0] .error！= 0，'red'：alerts [0] .error ！= 0}“' –

当您使用[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>

来源

2017-07-03 11:09:19 Dhyey

你可以得到它与三元运营商合作

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

我不知道为什么你的语法不工作，这似乎是正确的。角似乎在后面做什么，也许他们尝试，因为改变warnColor到warn-color让你的语法工作

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

来源

2017-07-03 10:52:46 Kyrsberg

ngclass条件在角度2与多类

回答

相关问题