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

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

1 个答案: