如何让RxJS Observable追加新值而非替换原有值？

要让新分页的数据追加到原有结果中，核心是用RxJS的scan操作符来累积每次请求返回的数据，替代原来直接替换的逻辑。

修改后的完整代码 #

@Component({
  template: '<div>{{ elements$ | async }}</div>'
})
export class MyComponent {
  page: BehaviorSubject<number> = new BehaviorSubject(0);
  elements$: Observable<any[]> = this.page.pipe(
    mergeMap((page) => this._service.getElements(page)),
    // 用scan累积数据：acc是历史数组，curr是当前请求返回的新数组
    scan((accumulatedElements, newPageElements) => [...accumulatedElements, ...newPageElements], [])
  );

  constructor(private _service: Service) {}

  onPageChange(pageNo: number): void {
    this.page.next(pageNo);
  }
}

关键逻辑说明 #

• scan操作符会维护一个累积状态：
  • 第一个参数是累加函数，接收两个值：accumulatedElements（之前所有页的合并数组）和newPageElements（当前请求返回的新页数据），通过扩展运算符[...acc, ...curr]把新数据追加到历史数据后面。
  • 第二个参数是初始状态，这里设为空数组[]，保证首次请求前有合法的初始值。

这样每次调用onPageChange触发新的分页请求时，新返回的[e3,e4]会和之前的[e1,e2]合并成[e1,e2,e3,e4]，而不是直接替换原有结果。

内容的提问来源于stack exchange，提问作者Razvan Fulea