動態改變ngClass值的遞增/遞減

Question

我有一種情況，我想根據輸出值的變化將類（使用ngClass）添加到我的視圖中。 輸出的值取決於來自API的響應，我每秒調用端點來獲取數據。 （簡單的外匯應用）

我嘗試使用ngModel和events進行雙向數據綁定，但注意到屏幕閃爍。

任何意見或建議將不勝感激。

添加一些代碼片斷

<tbody> 
    <tr *ngFor="let data of tableData"> 
    .......... 
    <td>{{ data.price }}</td> 
    </tr> 
</tbody> 

我想這個類添加到這個data.price價值，說的初始值爲100，在接下來的反應，如果是101，我想添加綠色背景，如果值爲99，我想添加一個紅色背景。 由於數據每秒都在變化，所以我很難維護狀態並添加類。

Answer 1

由於您還沒有提供任何示例代碼，因此我將使用div作爲選擇器。所以在這裏它是<div [class.className]="logicWhenTrue" [class.className]="logicWhenFalse">Content </div> .className如果邏輯返回true將被添加到元素，否則它將忽略該類，就好像它浪費了註釋掉的代碼。這就是爲什麼你需要寫一個你有多少邏輯。

UPDATE

試試這個：

.red { 
 
    background: red; 
 
} 
 

 
.green { 
 
    background: green; 
 
}

<tbody> 
 
<ng-container *ngFor="let data of tableData"> 
 
    <tr [class.green]="data.price > 100" [class.red]="data.price < 100"> 
 
    .......... 
 
    <td>{{ data.price }}</td> 
 
    </tr> 
 
</ng-container> 
 
</tbody>

這應該添加相應的類。