如何在Angular中动态获取进度栏

Question

我正在寻找进度美发师的解决方案。我想要做的只是根据我在后端获得的百分比来添加样式。

让我们在这里说我得到绿色的73％。所以我想使用

来应用类

background: linear-gradient(to right, green 73%, orange 73% 100%); 

现在我要在ts文件中添加它。假设我有一个类名'progress-bar'，那么如何将这种样式添加到ts文件的类中？

注意：我正在寻找ts文件的解决方案，因为progrss栏是动态生成的，因此我没有任何可用的html。

Answer 1

尝试ng-bootstrap小部件，它提供了几乎与您所需的进度条相同的功能。

示例：ng-Bootstrap progress bar

Answer 2

使用ngStyle，

[ngStyle]="{'background':'linear-gradient(to right, '+progressColor+' '+progress+'%, '+remainingProgressColor+' '+progress+'%'}"

  

我也将颜色设置为动态的。您可以根据要求进行更改。

演示：https://stackblitz.com/edit/angular-ivscqa

Answer 3

您可以使用Renderer2添加动态样式

import { Component } from '@angular/core';
import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
    constructor(private renderer: Renderer2, private el: ElementRef) {
    const progress = 73;
    this.renderer.setStyle(
        this.el.nativeElement,
        'background',
        `linear-gradient(to right,  green ${progress}%, orange ${progress}% 100%)`
      );
  }
}

stackblitz

Answer 4

如果进度栏是您自定义的， 您可以尝试

<some-element [ngStyle]="{'background': styleExp}">...</some-element>

您可以在其中从.ts文件中给出“ styleExp”表达式

更多{@ {3}}

Answer 5

简便方法：

您可以尝试使用[ngStyle] 您可以采用两个变量（或更多取决于您的颜色）。

假设x和y，为其分配值

那么您可以做：

getStyle() {
return {background: `linear-gradient(to right, green ${this.x}%, orange 
${this.y}% 100%)`};
}     

[ngStyle]="getStyle()"

或者您可以内联：

[ngStyle]="{'background': 'linear-gradient(to right, green '+ x + '%' + ', orange ' + y + '% ' + '100%)'}"