15

onScrollEnd仮想リストの最後の項目がレンダリングされたときにイベントをトリガーするコンポーネントがあります。scanこのイベントは、新しい API リクエストを実行して次のページをフェッチし、オペレーターを使用して以前の結果とマージします。

onSearchこのコンポーネントには、イベントをトリガーする検索フィールドもあります。

scan検索イベントがトリガーされたときにオペレーターから以前の累積結果をクリアするにはどうすればよいですか? または、ここでロジックをリファクタリングする必要がありますか?

const loading$ = new BehaviorSubject(false);
const offset$ = new BehaviorSubject(0);
const search$ = new BehaviorSubject(null);

const options$: Observable<any[]> = merge(offset$, search$).pipe(
  // 1. Start the loading indicator.
  tap(() => loading$.next(true)),
  // 2. Fetch new items based on the offset.
  switchMap(([offset, searchterm]) => userService.getUsers(offset, searchterm)),
  // 3. Stop the loading indicator.
  tap(() => loading$.next(false)),
  // 4. Complete the Observable when there is no 'next' link.
  takeWhile((response) => response.links.next),
  // 5. Map the response.
  map(({ data }) =>
    data.map((user) => ({
      label: user.name,
      value: user.id
    }))
  ),
  // 6. Accumulate the new options with the previous options.
  scan((acc, curr) => {
    // TODO: Dont merge on search$.next 
    return [...acc, ...curr]);
  }
);

// Fetch next page
onScrollEnd: (offset: number) => offset$.next(offset);
// Fetch search results
onSearch: (term) => {
  search$.next(term);
};
4

4 に答える 4

2

実用的な解決策が見つかりました:演算子withLatestFromの前に使用して現在のオフセットを確認しscan、必要に応じてこの値に基づいてアキュムレータをリセットします。

Stackblitz のデモ

于 2019-05-28T17:58:47.237 に答える