如何更改间隔中的垫进度条值？

Question

我正在使用角度5，并且有一个mat-progress-bar。我还有一个2 * 60的计时器，表示2分钟。我想每秒减少进度栏的值，两分钟后，栏的值变为0！我该怎么做？

Answer 1

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

组件类将如下所示：

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