如何動態改變primeNG進度背景？

Question

我正在使用primeNG progress component，我想根據值更改進度欄的顏色。所以25％25％是藍色，75％是綠色。

我發現我可以覆蓋給定的顏色有：

.delay .progressBarDelay .ui-progressbar .ui-progressbar-value { 
    background: red; 
} 

的HTML：

<div class="delay"> 
    <p>{{list.delay}}</p>     
    <div><p-progressBar class="progressBarDelay" [value]="list.value" [showValue]="false"></p-progressBar></div> 
</div> 

但現在所有的元素都是紅色的。我有多個進度條。有沒有辦法根據給定的值設置背景顏色？

Answer 1

你可以根據不同的值更改類，它這樣想，這樣的事情： -

<p-progressBar [ngClass]="{'progressBar-green': list.value > 50, 'progresbar-red': list.value < 50}" [value]="list.value" [showValue]="false"></p-progressBar> 

你可以通過一個函數來ngClass在這裏你可以定義你的邏輯。