angularfire2无限滚动实现答案

【问题标题】：angularfire2 infinite scroll implementationangularfire2无限滚动实现
【发布时间】：2017-05-17 18:03:03
【问题描述】：

我正在尝试在 Angular 2 中实现无限滚动并从 firebase 检索数据。我正在使用 Observable，但它带来了我在数据库中的所有记录，它的代码是

getUsers(): Observable<any> {
    return this.http.get(`${baseUrl}.json`).map((res: Response) => {
    this.data = res.json();
    return this.data;
    });
}

为了将数据分成块，我尝试了链接中的 Angular 1 实现之一

https://stackoverflow.com/a/40634381/5290012

也尝试过实现

https://medium.com/@Sureshkumar_Ash/angular-2-simple-infinite-scroller-directive-with-rxjs-observables-a989b12d4fb1

使用任何一个都会引发错误，指出属性不存在于

“Observable”类型上不存在“orderByChild”属性。

请建议我需要如何处理

【问题讨论】：

您是否尝试使用 angularfire2？因为你所做的根本没有使用 angularfire2 。我会转到angularfire2 repo 并按照文档进行操作。 orderByChild 仅在 AngularfireDatabase 列表中可用。
@J.AdamConnor 非常感谢，你是对的，我的实现是错误的。
是的，您将不得不使用查询功能对结果进行分页，在滚动时动态更改 endAt 值。类似的东西......
@J.AdamConnor 是的，你是对的，我现在能够获取有限的数据，我不认为这将是一个困难的实现，一旦我实现了相同的，就会更新一个小提琴。感谢您的宝贵时间。

标签： angular firebase angularfire2

【解决方案1】：

我可以通过将函数一分为二来实现这一点，并且每次滚动到达页面底部时都会调用 addItems() 函数，从而获取额外的数据。

    getUsers(): Observable<any> {
    return this.fb.list('/items', {
      query: {
        orderByChild: 'pnr_id',
        limitToFirst: 200,
      }
    });
  }

  addItems(newStart) {
    console.log(newStart);
      return this.fb.list('/items', {
        query: {
          orderByChild: 'pnr_id',
          startAt: newStart,
          endAt: newStart + 200,
        }
      });
    };

这对我来说完美无缺。

【讨论】：