Ionic Firestore应用分页失效问题修复求助

我现在卡在Firebase+Ionic的分页实现上，折腾了好久试各种方法、查资料，api.service里的queryFn1、queryFn2、queryFn3参数目前能用但还得优化，核心是分页逻辑搞不定。

说明 #

我对rxjs和observables完全不熟，就像刚学游泳的人在海里扑腾，根本不知道怎么追加、推送或者直接输出这些流式数据。

范围 #

听说combineWithLatest()可能能解决问题，但完全不知道怎么实现，现在彻底卡壳，不知道从哪下手。

建议征集 #

任何建议我都接受。

• api.service.ts：负责和Firestore建立连接
• chat.service.ts：获取users集合的数据
• page.ts：包含getMoreItems方法，计划每次加载5条更多数据

page.ts 代码 #

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ChatService } from 'src/app/services/chat/chat.service';

@Component({
  selector: 'app-community',
  templateUrl: './community.page.html',
  styleUrls: ['./community.page.scss'],
})
export class CommunityPage implements OnInit {

  users: Observable<any>;

  constructor(
    private chatService: ChatService
  ) { }

  ngOnInit() {
    this.getUsers(); // 获取所有社区用户
  }

  getUsers() {
    this.chatService.getUsers();
    this.users = this.chatService.users;    
  }

  //
  //无限滚动
  //

  private getMoreItems() {
    this.users.pipe().subscribe((users) => {
      let lastItem = users[users.length - 1];
      console.log('lastItem: ', lastItem);
      
      // 获取下5个用户
      this.chatService.getUsers(lastItem);
      this.users = this.chatService.users;
    });
  }

}

chat.service.ts 代码 #

public users: Observable<any>;

constructor(
  public api: ApiService
) { }

getId() {
  this.currentUserId = this.auth.getId()
}

getUsers(lastItem?) {
  // 获取userId
  this.getId();

  if(!lastItem) {
    this.users = this.api.collectionDataQuery(
    //this.api.collectionDataQuery(
      'users',
      //this.api.whereQuery('uid', '!=', this.currentUserId),
      //this.api.orderByQuery('uid', 'desc'),
      this.api.orderByQuery('lastSeen', 'desc'),
      this.api.limitQuery(5)
    )
  } else {
    let x = this.api.collectionDataQuery(
      'users',
      //this.api.whereQuery('uid', '!=', this.currentUserId),
      //this.api.orderByQuery('uid', 'desc'),
      this.api.orderByQuery('lastSeen', 'desc'),
      this.api.startAfterQuery(lastItem),
      this.api.limitQuery(5)
    )
    //this.users.push(x);
  }
}

api.service.ts 代码 #

import { Firestore, OrderByDirection, addDoc, collection, collectionData, doc, docData, getDoc, getDocs, limit, orderBy, query, setDoc, startAfter, updateDoc, where } from '@angular/fire/firestore';

collectionDataQuery(path, queryFn?, queryFn2?, queryFn3?) {
  let dataRef: any = this.collectionRef(path);
  
  // TODO: 此处逻辑需优化
  if(queryFn && queryFn2 && queryFn3) {
    console.log('queryFn && queryFn2 && queryFn3');
    const q = query(dataRef, queryFn, queryFn2, queryFn3);
    dataRef = q;
  } else if(queryFn && queryFn2) {
    const q = query(dataRef, queryFn, queryFn2);
    dataRef = q;
  } else if(queryFn) {
    const q = query(dataRef, queryFn);
    dataRef = q;
  }

  const collection_data = collectionData<any>(dataRef, {idField: 'id'});
  return collection_data;
}

whereQuery(fieldPath, condition, value) {
   return where(fieldPath, condition, value);
}

orderByQuery(fieldPath, directionStr: OrderByDirection = 'asc') {
  return orderBy(fieldPath, directionStr);
}

limitQuery(number) {
  return limit(number);
}

startAfterQuery(doc) {
  return startAfter(doc);
}

内容的提问来源于stack exchange，提问作者behicsakar