javascript - 如何动态改变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，您可以在其中定义您的逻辑。