angularfire2无限滚动实现

Question

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

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

为了将数据放入块中，我尝试了 link

中的 Angular 1 实现之一

并尝试实施

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

使用任何一个都会抛出错误，指出

上不存在属性

Property 'orderByChild' does not exist on type 'Observable'.

请建议我需要如何处理

Answer 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,
        }
      });
    };

现在对我来说效果很好。

angularfire2无限滚动实现

angularfire2 infinite scroll implementation

firebase

angularfire2

angular