Angular 异步重新加载微调器

Question

我有一个简单的设置来在异步管道为 null 时显示加载微调器:

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

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

最好的方法是什么？

如果重要的话，我有一个去抖动和一个 switchMap(即棘手的使用 finalize 等)

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

另外，我尝试了 *ngIf="!isLoading && (searchResults$ | async) as searchResults 但发现它有问题，例如 searchResults$ 未订阅，或者在更改检测后 Angular 提示更改

Answer 1

您可以尝试使用 tap 运算符设置 isLoading 变量，如下所示:

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

然后，您可以通过将其托管在 ng-container 内的不同 *ngIf 中来绕过 angular 而不是订阅您的 observable元素。

<ng-container *ngIf="(searchResults$ | async) as searchResults">
  <div *ngIf="!isLoading"></div>
</ng-container>
<ng-template *ngIf="isLoading">
    loading..
</ng-template>