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，您可以在其中定义逻辑。

如何动态更改primeNG进度背景？

1 个答案: