尝试使用rxjs和angular 2创建无限卷轴

我很难理解它如何将流数据添加到我的无限卷轴中

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

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>

{{prod.name}

flatMap

的行为与您在此处预期的不同。我建议一个很好的替代方案来实现你在这里的期望

将

产品$

声明为

主题的一种类型

。请注意，

主题

也是一个

可观察的

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

---

感谢您的回复，但卷轴上似乎没有添加任何内容。这个概念必须有效。检查onScroll是否真的开火了。在tap函数体的参数中放一个console.log（newData），看看newData是否真的进来了。是的，我已经试过查看tap中返回了什么，但我甚至没有看到每当它被触发时我已经登录到控制台，所以我看到了