如何查看设置的计时器倒计时 Angular 7

Question

如何在计时器开始时查看它的倒计时？我试过将它绑定到一个变量，但它显示为 [object Object]:

setTime(time) {
    if (this.settime >= 5 ) {
      this.currentTime = time;
      this.alerttime = this.settime;
    this.notifiy.showInfo( 'Timer set for ' + this.settime + ' Minutes train is due in ' + time + ' Minutes' , '');
    const val = this.settime * 60000;
    const source = timer(val);
    this.time = source;
    console.log(this.time); // this prints out the observbale function Ive also tryed to bind it in the subscribe method but no joy.
    const subscribe = source.subscribe(value => { this.alertTimer(); });
    this.settime = '';
    //cordova.plugins.backgroundMode.enable();
    } else {
      this.notifiy.showFailure('You cant set the timer below 5 minutes', '');
    }
  }

我不确定我做错了什么。

Answer 1

简短的回答是 "you cant"，因为您使用的实际计时器没有这个属性，因为 per the documentation.

但是根据你想用它做什么，你可能想单独跟踪实际经过的时间，为此你可以使用 "interval"。

https://rxjs.dev/api/index/function/interval

假设您将 timer() 设置为 120 秒，因此它会在计划结束时执行。然后您使用一个单独的 interval() 的 1 来跟踪经过的时间，并更新 UI 等，直到主计时器结束。

显示概念的伪代码。从我的头顶开始，可能会有错别字之类的：

class TimerManager {

   private totalSeconds;
   private elapsedSeconds;

   private timerSub;
   private intervalSub

   // Start the timer
   public startTimer(timerLengthSeconds) {
      this.totalSeconds = timerLengthSeconds;
      var t = new timer(timerLengthSeconds);
      this.timerSub = t.subscribe(t => this.endTimer());
      var i = new interval(1000);
      this.intervalSub = i.subscribe(i => this.intervalElapsed());
   }

   // On each interval
   private intervalElapsed() {
      this.elapsedSeconds++;
      var remaining = this.totalSeconds - this.elapsedSeconds;
      console.log(this.elapsedSeconds + "s have elapsed, there are " + remaining + "s left");
   }

   // When the main timer ends
   private endTimer() {
     console.log("The time is up!!");
     this.intervalSub.unsubscribe();
   }

}

Answer 2

您可以通过查看设置间隔功能来查看定时器倒计时。这是一个例子。您甚至可以在 Type Script 中使用它。我认为这可以解决您的问题。

//120 Seconds timer...
var timeleft = 120;
var downloadTimer = setInterval(function() {
  if (timeleft <= 0) {
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Finished";
  } else {
    document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  }
  timeleft -= 1;
}, 1000);

<div id="countdown"></div>

如何查看设置的计时器倒计时 Angular 7

How can I view a set timers countdown Angular 7

javascript

typescript

angular7