如何创建一些计时器并显示它们的结果？

Question

我已经使用 RXJS 创建了计时器：

let timer1value = null;
let timeFinish =  30;
let finishDate = new Date();

return timer(1000)
      .pipe(
        takeWhile(() => new Date() < finishDate),
        finalize(() => {
          timeFinish = finishDate;
        })
      )
      .subscribe((t) => {
      timer1value = t;
});

我需要创建一些计时器并在页面上显示结果：

{{timer1value}}

因此，我已将观察者添加到数组 this.timers:

this.timers.push(timer(1000)
      .pipe(
        takeWhile(() => new Date() < finishDate),
        finalize(() => {
          timeFinish = finishDate;
        })
      ));

那么如何在模板中获取订阅中各个定时器的实际值呢？


{{timer2value}}

{{timerNvalue}}```

Answer 1

在 Angular 中，您可以使用 AsyncPipe 来显示 Observables 发出的最新值。

要显示数组中第一个计时器的最新值，您可以这样写：

{{timers[0] | async}}

Answer 2

您使用 ngFor 遍历计时器数组，然后使用异步管道解包可观察值的值

<ng-container *ngFor="let timer of timers; let i = index;">
  Timer {{ index }} is {{ timer | async }}<br>
</ng-container>

如何创建一些计时器并显示它们的结果？

How to create some timers and show result from them?

rxjs

angular

rxjs6