我怎样才能用 Ionic 做一个计时器？

Question

我正在尝试在我的 Ionic 应用程序中做一种计时器，它应该在我加载页面时启动，并且它应该每秒向先前初始化为 0 的变量添加一个值。我写了这个但它不起作用：

  ngOnInit() {
 this.counter();
}


counter(){
  while(this.value!=1){
    timer(1000).subscribe(x => {this.value=this.value+0.075 })
  }
}

定时器是从'rxjs'导入的方法。

期间必须改变的HTML片是：

<ion-progress-bar value={{value}} buffer={{buffer}}></ion-progress-bar>

变量在这里定义：

    private value_: number=0;
    private buffer_: number=this.value;

最后我想说我已经创建了set和get方法。

Answer 1

您实际上不需要控制器中的订阅。您可以在模板中使用 async 管道。
您可以立即启动计时器，并将初始延迟设置为零：timer(0, 1000)。
您可以使用 takeWhile 运算符来完成可观察对象，而不是 while。

控制器

import { timer, Subject } from 'rxjs';
import { map, takeUntil, takeWhile } from 'rxjs/operators';

private stop$ = new Subject<any>();

private value_: number = 0;
private buffer_: number = this.value;

timer$ = timer(0, 1000).pipe(
  takeUntil(this.stop$),               // stop when `stop$` emits
  takeWhile(_ => this.value_ < 1),     // are you sure `this.value_ == 1` is right?
  finalize(() => this.someMethod()),   // run this method when observable completes
  map(_ => {
    this.value_ = this.value_ + 0.075;
    return this.value_;
  }
);

模板

// is buffer always set to zero?
<ion-progress-bar [value]="timer$ | async" [buffer]="buffer"></ion-progress-bar>

更新

使用 finalize 运算符在 observable 完成时做一些事情。
使用takeUntil 运算符随时停止可观察流。在这种情况下，我使用了一个名为 stop$ 的 RxJS Subject。当你想停止流时，像 this.stop$.next().
如果您希望运行 finalize 仅使用 takeWhile，则将 takeUntil 运算符移到 finalize 下方。 someMethod() 不会在您明确停止流时触发。

我怎样才能用 Ionic 做一个计时器？

How can I do a timer with Ionic?

web-applications

typescript

ionic-framework

angular

更新