角度异步重新加载微调器

Question

我有一个简单的设置，可以在异步管道为空时显示加载旋转器：

<div *ngIf="(searchResults$ | async) as searchResults; else loading">
</div>
<ng-template #loading>
    loading..
</ng-template>

但是，当用户第二次再次搜索时，加载...不显示，我想我需要这个 searchResults$ observable 来发出 null 以再次显示微调器，或者有一个单独的 isLoading 变量。

最好的方法是什么？

如果重要的话，我有一个 debounce 和一个 switchMap （即使用 Finalize 等很棘手）

this.searchResults$ = this.filters$
      .pipe(
        debounceTime(200),
        distinctUntilChanged(),
        switchMap((f) => {
            return httpGet(f)
        })
      )

另外，我尝试过，*ngIf="!isLoading && (searchResults$ | async) as searchResults但发现它有问题，例如 searchResults$ 未订阅，或者角度抱怨更改检测后的更改

Answer 1

我现在使用 ngx-http-request-state 库，它提供加​​载、错误和渲染状态。如果您使用 scan() 或 withLatestFrom()，它也可以在重新加载时工作。它也适用于内部可观察的结果。

如果使用 graphql，我考虑使用 fetchPolicy、loading 和 networkStatus 选项的组合。