分页（Startafter）在firestore和Angular 9 App中不起作用

Question

On page load I'm getting the data of 15 records, after scrolling down I can able to call the API but it's returning empty array.(I have total 40 records in my firestore db).

// Service.ts
getUsers(config: any) {
    return this.firestore
    .collection(
      'users',
      ref => ref
      .where('country', '==', 'India')
      .orderBy('lastlogin')
      .startAfter(config.page * config.limit)
      .limit(config.limit)
    )
    .snapshotChanges();
  }

// Component

getUsers() {
    this.loader = true;
    this.userService.getUsers(this.config).subscribe((res: any) => {
      this.loader = false;
      const data = res.map((e: any) => ({
        id: e.payload.doc.id,
        ...e.payload.doc.data()
      }));
      this.usersCollection = this.usersCollection.concat(data);
    });

// Infinite Scroll
onScroll() {
    this.config.page += 1;
    this.getUsers();
  }

My Solution

Only problem is first time lastVisible have no data, have to set to 0.

getUsers(config: any, lastVisible) {
    const { doc } = lastVisible.payload ? lastVisible.payload : { doc: 0}
    return this.firestore
    .collection(
      'users',
      ref => ref
      .where('country', '==', 'India')
      .orderBy('lastlogin')
      .startAfter(doc)
      .limit(config.limit)
    )
    .snapshotChanges();
  }

// Component

getUsers() {
    this.loader = true;
    this.userService.getUsers(this.config, this.lastVisible).subscribe((res: any) => {
      this.loader = false;
      this.lastVisible = res[res.length - 1];
      const data = res.map((e: any) => ({
        id: e.payload.doc.id,
        ...e.payload.doc.data()
      }));
      this.usersCollection = this.usersCollection.concat(data);
    });

Answer 1

Firestore pagination does not work based on a numeric offset, but is based on so-called cursors/anchor document. From the documentation on startAfter :

Creates and returns a new Query that starts after the provided document (exclusive). The starting position is relative to the order of the query. The document must contain all of the fields provided in the orderBy of this query.

So your call:

 .startAfter(config.page * config.limit)

Tries to start after the document instance config.page * config.limit . Since this is not a document snapshot/reference but a number, it doesn't know what document to start after, so it returns nothing.

Instead of passing a numeric offset, you'll need to remember the last document snapshot of the current results and pass that into startAfter .

I highly recommend reading the documentation on paginating data with query cursors .