3

非同期パイプが null のときに読み込みスピナーを表示する簡単なセットアップがあります。

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

ただし、ユーザーがもう一度検索すると、loading.. が表示されません。null を発行してスピナーを再度表示するには、この searchResults$ オブザーバブルが必要か、別の isLoading 変数が必要だと思います。

それを行う最良の方法は何ですか？

問題がある場合は、debounce と switchMap を用意しました (つまり、ファイナライズなどを使用するのは難しい)

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

また、試し*ngIf="!isLoading && (searchResults$ | async) as searchResultsてみましたが、問題があることがわかりました。

4

2 に答える 2

2

私は同じ問題に直面し、「ask」ストリームと「result」ストリームを区別して解決し、両方をコンポーネント結果オブザーバブルにマージしました。このようなもの（コードに基づく）：

this.searchResults$ = merge(
      this.filters$.pipe(map(f => null)),
      this.filters$.pipe(
        debounceTime(200),
        distinctUntilChanged(),
        switchMap((f) => {
            return httpGet(f)
        })
      )
    );
于 2019-02-17T21:59:04.627 に答える