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

Question

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

score 2 · Accepted Answer

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

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

1 回答 1