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

【问题标题】：Show Loading Indicator for a timer based observable rendered using async pipe显示使用异步管道呈现的基于计时器的可观察对象的加载指示器
【发布时间】：2020-07-20 21:39:46
【问题描述】：

我有一个角度 http 请求，我使用 rxjs 计时器进行了自动刷新...

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

我在我的模板中使用 if else 中的异步管道显示这个 observable 以在它完成之前显示一个加载指示器...

<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 或其他东西，然后执行请求，然后发出请求响应对象。

【问题讨论】：

标签： angular rxjs async-pipe

【解决方案1】：

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

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

【讨论】：

正是我想要的。谢谢！