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

时间:2018-05-31 19:59:16

标签: angular rxjs angular-material2

我想在我有角度的材料小吃店里面添加一个角度材料进度条。进度条的点是作为倒计时,所以如果小吃栏打开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的更改检测就会停止。

enter image description here

0 个答案:

没有答案