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與多類

回答

相關問題