AngularFire 2-实时数据库列表未正确分页

时间:2019-02-11 12:44:24

标签: javascript angular firebase firebase-realtime-database angularfire2

技术:Angular版本7,AngularFire2版本5,Firebase数据库实时。

我希望在我的一个Firebase表中对5000个结果的表进行分页。

我想以每页2个结果的大小作为测试示例。

当前尝试(但似乎过时的解决方案并且不起作用):

public getFirstPage(): Observable<any> {
    const query = this.angularFireDatabase.list('test', ref =>
      ref
        .orderByChild('description')
        .limitToFirst(2)
    );

    return from(super.getList(query)
      .pipe(
        map(data => {
          return {
            firstItem: data[0],
            lastItem: data[1],
            jobs: data
          };
        })
      ));
  }

  public getNextPage(lastItem): Observable<any> {
    const query = this.angularFireDatabase.list('test', ref =>
      ref
        .orderByChild('description')
        .startAt(lastItem.description, lastItem.key)
        .limitToFirst(2)
      );

    return from(super.getList(query)
      .pipe(
        map(data => {
          return {
            firstItem: data[0],
            lastItem: data[1],
            jobs: data
          };
        })
      ));
  }

  public getPrevPage(firstItem): Observable<any> {
    const query = this.angularFireDatabase.list('adzuna', ref =>
      ref
        .orderByChild('description')
        .endAt(firstItem.description, firstItem.key)
        .limitToFirst(2)
      );

    return from(super.getList(query)
      .pipe(
        map(data => {
          return {
            firstItem: data[0],
            lastItem: data[1],
            jobs: data
          };
        })
      ));
  }

问题:

getPrevPage方法重新启动列表,例如将用户带到前两个项目,而不是最后两个项目。

getNextPage方法始终始终先显示先前的一项,然后再显示一个新的项。

几乎可以正常工作。

0 个答案:

没有答案