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

Question

我有一个角度的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())),
);