Как изменить значение mat-progress-bar в интервале? - PullRequest
Новая
       40

Как изменить значение mat-progress-bar в интервале?

0 голосов
/ 20 октября 2018

Я использую Angular 5 и у меня есть индикатор хода выполнения мат.У меня также есть таймер со значением 2 * 60, что означает 2 минуты.Я хочу уменьшать значение индикатора выполнения каждую секунду, и через 2 минуты значение индикатора становится равным 0!как я могу это сделать?

1 Ответ

0 голосов
/ 20 октября 2018

Вы можете использовать следующий код в качестве примера.

Класс компонента будет выглядеть следующим образом: 

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

...