Показать индикатор загрузки для основанной на таймере наблюдаемой визуализации с использованием канала asyn c

Question

У меня есть angular http-запрос, который я сделал автоматически refre sh, используя rx js timer ...

this.data$ = timer(0, 1000 * 10).pipe(
  flatMap(() => this.service.getData())
);

Я показываю это в моем шаблоне, используя asyn c труба внутри if, чтобы показать индикатор загрузки до его завершения ...

<ng-container *ngIf="data$ | async as data; else loading">
</ng-container>

<ng-template #loading>
  <ngx-spinner></ngx-spinner>
</ng-template>

Это прекрасно работает. Но когда таймер срабатывает каждые 10 секунд, я бы хотел, чтобы загрузочный шаблон снова показывался до тех пор, пока не завершится http-запрос. Я предполагаю, что мне нужен способ сформировать это выражение rx js, чтобы каждые 10 секунд он немедленно испускал ноль или что-то, затем выполнял запрос, а затем испускал объект ответа на запрос.

Answer 1

Если вы не возражаете отказаться от ранее загруженного результата во время его загрузки, вы можете выдать null до запуска запроса:

this.data$ = timer(0, 1000 * 10).pipe(
  flatMap(() => concat(of(null), this.service.getData())),
);