问题描述
我有一个在呈现虚拟列表中的最后一项时触发onScrollEnd
事件的组件.此事件将发出一个新的API请求,以获取下一页,并使用scan
运算符将它们与以前的结果合并.
此组件还具有一个触发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);
};
找到了一个可行的解决方案:我在scan
运算符之前使用withLatestFrom
检查当前偏移量,并根据需要根据该值重置累加器./p>
I have a component which triggers an onScrollEnd
event when the last item in a virtual list is rendered. This event will do a new API request to fetch the next page and merge them with the previous results using the scan
operator.
This component also has a search field which triggers an onSearch
event.
How do I clear the previous accumulated results from the scan
operator when a search event is triggered? Or do I need to refactor my logic here?
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);
};
Found a working solution: I check the current offset by using withLatestFrom
before the scan
operator and reset the accumulator if needed based on this value.
这篇关于如何基于另一个Observable重置RXJS扫描运算符的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!