Question

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

users = [
{
  "name": "Tim Jones",
  "email": "timjones_1965@gmail.com",
  "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

从Change angular material progress bar color from code派生和修改的代码利用元素的值，可以将其插入指令中以修改进度条的颜色。

在您的HTML中

<mat-progress-bar 
  value="{{ element.percent_complete }}"
  [appProgressBarColor]="(element.percent_complete)"
  mode="determinate">
</mat-progress-bar>

创建一个新的TS文件，我使用mat-progress-bar在与组件相同的目录中制作了一个文件。我将其命名为 progress-bar-color.ts 注意更改颜色的逻辑，您可以修改阈值和颜色。

import { Directive, Input, OnChanges, SimpleChanges, ElementRef } from '@angular/core';

@Directive({
selector: '[appProgressBarColor]'
})
export class ProgressBarColor implements OnChanges{
static counter = 0;
color: string;
@Input() appProgressBarColor;
styleEl:HTMLStyleElement = document.createElement('style');

//generate unique attribule which we will use to minimise the scope of our dynamic 
style 
uniqueAttr = `app-progress-bar-color-${ProgressBarColor.counter++}`;

constructor(private el: ElementRef) { 
const nativeEl: HTMLElement = this.el.nativeElement;
nativeEl.setAttribute(this.uniqueAttr,'');
nativeEl.appendChild(this.styleEl);
}

ngOnChanges(changes: SimpleChanges): void{
this.updateColor();
}


updateColor(): void{
if (this.appProgressBarColor > 75){
  this.appProgressBarColor = 'green'
} 
else if (this.appProgressBarColor > 50){
  this.appProgressBarColor = 'gold'
}
else if (this.appProgressBarColor > 25){
  this.appProgressBarColor = 'orange'
}
else{
  this.appProgressBarColor = 'red'
}
console.log(this.appProgressBarColor)

// update dynamic style with the uniqueAttr
this.styleEl.innerText = `
  [${this.uniqueAttr}] .mat-progress-bar-fill::after {
    background-color: ${this.appProgressBarColor};
  }
`;
console.log(this.appProgressBarColor)  
}}

Answer 2

您尝试过吗：

<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 3

好吧，如果有人在自定义颜色方面苦苦挣扎，我已经在组件中添加了以下内容：

<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;
}

我的进度条很好，没有原色/重点色的限制。

根据值更改垫进度条颜色

3 个答案: