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

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循环了timers数组，然后使用异步管道解开了observable的值

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