Javascript 如何动态更改启动进度背景？

我正在使用，我想根据值更改进度条的颜色。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>

{{list.delay}}

---

但是现在所有的元素都是红色的。我有多个进度条。有没有一种方法可以根据给定的值设置背景色？

您可以根据值更改类别，它是这样认为的，如下所示：-

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

---

您可以将一个函数传递给ngClass，在那里您可以定义您的逻辑。

谢谢，这很好。我可能会尝试更改它，以便在html中使用组件中的值，以便在html中更容易阅读。