Question

我无法理解它如何将流数据添加到无限滚动中。

我声明我的可观察变量和页面偏移量

products$;
offset: number = 0;

然后，我通过我的一项服务创建可观察对象：

this.products$ = this.storeService.getProductsLatest(100, this.offset).pipe(
      map(r => fixImages(r, 1000000000))
    )

到目前为止，该方法有效，我得到了100种产品，页面偏移为0

现在，我有一个名为onScroll的函数，每次容器滚动达到总高度的80％时都会触发该函数。这应该从下一页获得另外20种产品

onScroll() {
    this.products$.pipe(
      flatMap(() => this.storeService.getProductsLatest(20, this.offset++).pipe(
        map(r => fixImages(r, 1000000000))
      )),
    )
  }

flatMap在这里似乎没有做任何事情，当我向下滚动时，它应该在流式传输额外的产品，但它没有

我的组件视图示例：

<ul>
    <li *ngFor="let product of products$|async">
        {{ prod.name }}
    </li>
</ul>

Answer 1

flatMap的行为不符合您的预期。我建议您在这里实现您的期望。

将products$声明为Subject的类型。请注意，Subject也是Observable。

onScroll() {
    this.storeService.getProductsLatest(20, this.offset++).pipe(
        map(r => fixImages(r, 1000000000)),
       tap(newData => this.products$.next(newData))
      )

尝试使用rxjs和angular 2创建无限滚动

1 个答案: