根据值更改mat-progress-bar颜色

Question

我有一个从数组中获取其值的进度条，如下所示：

users = [
{
  "name": "Tim Jones",
  "email": "[email protected]",
  "photo": "assets/images/tim-jones.jpg",
  "progress": "50"
},

进度条

<mat-progress-bar mode="determinate" value="{{user.progress}}"></mat-progress-bar>

我想根据进度值显示不同的颜色：

进度从0％到20％=红色 进展从21％到50％=黄色 进展从51％到100％=绿色

谢谢你的帮助！

Answer 1

你有没有尝试过：

<mat-progress-bar 
   mode="determinate" 
   [color]="updateColor(user.progress)"
   value="{{user.progress}}">
</mat-progress-bar>

有：

updateColor(progress) {
   if (progress<21){
      return 'primary';
   } else if (progress>80){
      return 'accent';
   } else {
     return 'warn';
   }
}

Answer 2

好吧，如果有人在使用自定义颜色，我已经在我的组件中添加了这样的东西：

<div [ngClass]="{
            'danger-bar': oa.areaProgress <= 20,
            'warn-bar': oa.areaProgress > 21,
            'ok-bar': oa.areaProgress > 51
          }">
            <mat-progress-bar class="" mode="determinate" value="{{user.progress}}"></mat-progress-bar>
          </div>

并在主题的CSS：

.danger-bar .mat-progress-bar-buffer {
    background-color: #ffd7d0!important;
}
.danger-bar .mat-progress-bar-fill::after {
    background-color: #ff6859!important;
}

.warn-bar .mat-progress-bar-buffer {
    background-color: #fff8e5!important;
}
.warn-bar .mat-progress-bar-fill::after {
    background-color: #ffcf44!important;
}

.ok-bar .mat-progress-bar-buffer {
    background-color: #b6fff2!important;
}

.ok-bar .mat-progress-bar-fill::after {
    background-color: #1eb980!important;
}

我有一个很好的进度条，没有主要/强调颜色的限制。