Angular 使用 rxjsTimer 倒计时/可观察订阅

Question

使用 Angular5.

我正在开发实时聊天。

用户可以聊天直到倒计时达到 0。

第一个用户输入时，倒计时开始：

private engage_session() {

if(!this.is_engaged){

  this.countDown = Observable.timer(0, 1000)
    .take(this.counter)
    .map( () => --this.counter );   

  this.countDown.subscribe( remaining_credit => { this.remaining_credit = remaining_credit } );  
}

this.is_engaged = true;

}

我需要订阅倒计时，以便我可以在另一个功能中使用它:

public sendMessage(message: Message): void
  {
    this.engage_session();

    if (!message) { return; }

    this.socketService.send({
      from: this.tokenUser.username,
      content: message,
      created_at: moment().format(),
      remaining_credit: this.remaining_credit || this.counter,
    });
    this.messageContent = null;
  }

我在模板中也有这样的东西：

 CountDown : <span class="badge badge-light">{{countDown | async | formatTime }}</span>

问题是：当我订阅倒计时时，计时器的运行速度是正常速度的两倍。

但是当我删除该行时：

this.countDown.subscribe( remaining_credit => { this.remaining_credit = remaining_credit } );

那么倒计时工作正常..

感谢您的帮助=)

Answer 1

速度是原来的两倍，很可能是因为您订阅了两次（async 是您的第二次订阅）。我不完全了解你的结构和实现，但我认为你可以简单地做：

CountDown : <span class="badge badge-light">{{remaining_credit | formatTime }}</span>

如果这个 HTML 来自创建countDown observable

的组件

Angular 使用 rxjsTimer 倒计时/可观察订阅

Angular Countdown with rxjsTimer / observable subscribe

angular

timer

rxjs

observable

subscription