为使用异步管道呈现的基于计时器的可观察对象显示加载指示器

Question

我有一个 angular http 请求，我已使用 rxjs 计时器自动刷新...

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

我在我的模板中使用 if else 中的异步管道显示此可观察对象，以便在它完成之前显示加载指示器...

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

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

效果很好。但是当计时器每 10 秒触发一次时，我希望加载模板再次显示，直到 http 请求完成。我想我需要一种方法来形成这个 rxjs 表达式，以便它每 10 秒立即发出一个 null 或其他东西，然后执行请求，然后发出请求响应对象。

Answer 1

如果您不介意在加载时丢弃之前加载的结果，您可以在触发请求之前发出 null：

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

Show Loading Indicator for a timer based observable rendered using async pipe