无限滚动的可观察分页以保持最新

Question

我试图让我的 observable 在分页期间自动更新。

仅页面触发器

当load()被调用时，页面observable被触发，但是订阅observable在更新时没有被触发...

pageSub = new BehaviorSubject<number>(1);
page = 1;

// in constructor...

this.posts = this.pageSub
  .pipe(
    mergeMap((page: number) => this.urql
      .subscription(this.GET_POSTS,
        {
          first: this.ITEMS.toString(),
          offset: (this.ITEMS * (page - 1)).toString()
        }
      )
    ),
    scan((acc, value) => [...acc, ...value]),
  );

// called from button

load() {
  this.page += 1;
  this.pageSub.next(this.page);
}

仅订阅触发器

这里确实触发了订阅更改，但是当调用 load() 时，不会触发页面更改...

this.posts = combineLatest([this.pageSub, this.urql
  .subscription(this.GET_POSTS,
    {
      first: this.ITEMS.toString(),
      offset: (this.ITEMS * (this.page - 1)).toString()
    }
  )]).pipe(
    map((arr: any[]) => arr[1])
  );

当然，有一种方法可以让 Observable 随页面更改和订阅更改而更新吗？

我应该补充一点，重置变量声明 this.posts 不起作用，因为它刷新了页面并且不是预期的行为。

有什么想法吗？

谢谢，

J

Answer 1

知道了：

mainStream: BehaviorSubject<Observable<any>>;

posts!: Observable<any>;

constructor(private urql: UrqlModule) {

  this.mainStream = new BehaviorSubject<Observable<any>>(this.getPosts());

  this.posts = this.mainStream.pipe(mergeAll());

}

async load() {
  this.page += 1;
  this.mainStream.next(this.combine(this.mainStream.value, this.getPosts()));
}

getPosts() {
  return this.urql.subscription(this.GET_POSTS,
    {
      first: this.ITEMS.toString(),
      offset: (this.ITEMS * (this.page - 1)).toString()
    }
  )
}

combine(o: Observable<any>, o2: Observable<any>) {
  return combineLatest([o, o2]).pipe(
    map((arr: any) => arr.reduce((acc: any, cur: any) => acc.concat(cur)))
  );
}

无限滚动的可观察分页以保持最新

Observable Pagination for infinite scroll to stay up to date

pagination

observable

rxjs

combinelatest

mergemap