角度材料 - 在小吃店内使用进度条

Question

我想在我有角度的材料小吃店里面添加一个角度材料进度条。进度条的点是作为倒计时，所以如果小吃栏打开5秒，那么在5秒的过程中，进度条从100开始 - > 0或类似的东西。

但是，我在进度改变方面遇到了一些麻烦。下面的代码就是我在我的小吃店里的代码。基本上，每x秒我增加进度条值。这在常规组件中工作正常，但在快餐栏中，进度值在启动后就会停止。

export class PizzaPartyComponent implements OnInit{
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }
  intervalSubscription;
  countdown: number = 0;
  ngOnInit(){
    const source = interval(100);

    this.intervalSubscription = source.subscribe(val => {
        this.countdown += 1;
        console.log("Interval", val, " - ", this.countdown)
    });
  }

  ngOnDestroy(): void {
    console.log("Snackbar Destoryed")
    this.intervalSubscription.unsubscribe();
  }
}

控制台读取

  

间隔0 - 1

     

间隔0 - 2

     

间隔0 - 3

     

间隔0 - 4

     

间隔0 - 5

依此类推，直到小吃店被摧毁（小吃店在0-30左右关闭）。

代码中的

countdown正在更新，但是，进度条值很早就被卡住了。如果在屏幕上呈现countdown，它将从0变为2，之后不会更新。 它总是会有两个间隔循环。我唯一能想到的是ngOnInit()完成后，countdown的更改检测就会停止。