如何在一个时间间隔内更改垫进度条值？

Question

我正在使用 angular 5，我有一个进度条。我还有一个 2 * 60 值的计时器，这意味着 2 分钟。我想每秒减少 progress-bar 的值，2 分钟后 bar 的值变为 0！我该怎么做？

Answer 1

您可以使用以下代码作为示例。

组件 class 将如下所示：

export class AppComponent {
  progressbarValue = 100;
  curSec: number = 0;

  startTimer(seconds: number) {
    const time = seconds;
    const timer$ = interval(1000);

    const sub = timer$.subscribe((sec) => {
      this.progressbarValue = 100 - sec * 100 / seconds;
      this.curSec = sec;

      if (this.curSec === seconds) {
        sub.unsubscribe();
      }
    });
  }
}

在模板中，您的进度条使用 progressbarValue 的值：

<mat-progress-bar mode="determinate" [value]="progressbarValue"></mat-progress-bar>

以及启动 startTimer 方法的按钮：

<button mat-raised-button (click)="startTimer(60)">Start timer</button>

您可以在此处找到运行代码示例：

https://stackblitz.com/edit/angular-material-progress-bar-decrease

如何在一个时间间隔内更改垫进度条值？

How to change a mat-progress-bar value in an interval?

javascript

setinterval

progress-bar

angular-material

angular5