Как создать несколько таймеров и показать результат из них?

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>