javascript - 如何将值传递给 DIV 标记中的 CLASS？

Question

我正在为进度条编辑现有代码。最初，进度条只能接受进度值[min, max, progress]。例如 [min=0, max=100, progress=30]。

我想添加可以改变颜色的新输入。例如，如果 color="yellow"，则进度条颜色为黄色。我该怎么做？

我想让 CLASS 值 (progress-bar.html) 可变。

我尝试了几种方法，但由于对语法缺乏了解，我没有成功。

主要.html

<progress-bar [min]="0" [max]="100" [progress]="30" [color]="yellow">
</progress-bar>

进度条.ts

 export class ProgressBarComponent {

  @Input()
  progress: number;

  @Input()
  min: number;

  @Input()
  max: number;

  @Input()
  color: any;


  constructor() {
  }

进度条.html

<div style="display:flex;padding-bottom:5px;">
<div class="red" [style.width]="((progress/max) *100) + '%'"></div>
<div class="background-bar" [style.width]="(100-((progress/max) *100)) + '%'"></div>

进度条.scss

.red{
    height:10px;
    margin-top:20px;
    background-color:#E64B55;
     -webkit-transition: width 2s;
transition: width 2s;
}

.yellow{
    height:10px;
    margin-top:20px;
    background-color:#db6623;
     -webkit-transition: width 2s;
transition: width 2s;
}
.background-bar{
    height:10px;
    margin-top:20px;
    margin-left:0px;
    background-color:lightgrey;
}

Answer 1

为 div 设置 class={{color}} .div class="warning {{color}}"的背景颜色，这是您从父组件输入的颜色。