Question

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

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

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

什么是最好的方法？

如果有关系，我会有一个去抖动和switchMap（即使用finalize等技巧很麻烦）

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

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

Answer 1

我遇到了相同的问题，并解决了区分“询问”流和“结果”流的问题，将两者合并以得到可观察到的组分结果。这样的事情（基于您的代码）：

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

Answer 2

您可以尝试使用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中，从而避免不订阅可观察对象的角度问题。

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

角度异步重新加载微调器

2 个答案: