我的 api 中有一個資料元素來顯示價格和一些百分比資料。根據我想給負數紅色和 0 及以上綠色的數字。我在 Angular 檔案中看到您可以使用 ngstyle 和 ngClass。我決定選擇 ngClass，這樣我就可以將代碼重用于其他頁面。這就是我所擁有的：
<ion-row>
<div>{{Prices}}</div>
</ion-row>
和
<ion-row>
<div>{{PricesPercentage}}</div>
</ion-row>
資料如下所示：
價格：
1304.53
價格百分比：
2.33906, -0.04118
當它是負數時，我想給 css 類紅色。
.green-color{
color:green;
}
.red-color{
color:red;
}
我在谷歌上搜索了解決方案，這是我嘗試過的：
解決方案1：使用函式
checkNumberColor(numberCheck) {
if (this.numberCheck >= 0,0) {
return 'green-color';
}
if (this.numberCheck < 0,0) {
return 'red-color';
}
}
我像這樣系結這個：
<div [ngClass]="checkNumberColor(PricesPercentage)">{{PricesPercentage}}</div>
我已經對此進行了測驗，但沒有奏效。chrome 開發工具中沒有錯誤。
Angular 2 ngClass 函式
解決方案 2：ngClass 本身的條件
<div [ngClass]="{'red-color' : (PricesPercentage) < 0.00, 'green-color' : (PricesPercentage) >= 0.00}">{{PricesPercentage}}</div>
如何使用ng-class實作angularJs的正反造型？
我使用此檔案將 ngClass 轉換為更新的版本：
https://angular.io/api/common/NgClass
我更喜歡解決方案 2 的作業。當我打開我的應用程式時，它不會改變顏色。
有人可以指出我正確的方向嗎？
uj5u.com熱心網友回復：
你的實作[ngClass]是錯誤的。這是你應該如何做的。
[ngClass]="PricesPercentage > 0 ? 'green-color' : 'red-color'"
這是我現在創建的 stackblitz 的鏈接，以幫助您了解[ngClass]實際情況。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/496523.html