如何按时间设置mat-progress-bar？

Question

我正在使用Angular 7，但它是非常新的。 我想为我的应用程序使用“ mat-progress-bar”。 当用户将数字3置于第二位时，我的应用将每3秒执行一次功能，并且进度条将在3秒后填充100％。

我尝试将setInterval()用于函数执行，并将interval()用于进度栏，如下代码。

some function {
 let index: number = 0;
 this.timerToken = setInterval(() => {
          index++;
          if(data.length <= index) { index = 0; }
          this.startProgressbar(3);
          this.dialogRefManifest.componentInstance.onClickDetail(data[index], this.config.groupingValue);
        }, 3 * 1000);
}
startProgressbar(second: number): void {    this.progressbar = 0; 
    let timer$ = interval(10 * second);
    let sub = timer$.subscribe(() => {
    this.progressbar = this.progressbar + 1;
       if(this.progressbar >= 100) { sub.unsubscribe(); }
    });
}

执行代码时，功能执行和进度条不匹配，显示也不自然。

请给我建议以解决此问题。

谢谢。