Firebase

Question

我看到了这个post：Cloud Firestore - How to paginate data with RXJS

这正是我需要的，但我不明白如何重现

import { UsersService } from '../../../shared/services/users.service';

我只需要了解此服务中的内容，因为我无法使功能像 getUsers() 和 loadMoreData() 一样工作。我正在学习 AngularFire 上的新模块化方法，上面的答案是我需要理解的正确实现分页的方法。

到目前为止我做了什么：

import {
  collection,
  collectionData,
  Firestore,
  limit,
  orderBy,
  query,
  startAfter
} from "@angular/fire/firestore";


querySnapshot:any;
lastInResponse:any;


  constructor( private stringEmitted: StringBridgeService, private firestore: Firestore ) {
  }

  ngOnInit(): void {
    this.stringEmitted.stringChanged(this.actualTitle);
    this.loadCustomers('customers', 'name', 5)
  }


  loadCustomers(collectionName:string, order:string, max:number) {
    return collectionData(query(collection(this.firestore, collectionName), orderBy(order), limit(max))).subscribe(
      response => {
        // @ts-ignore
        this.lastInResponse = response[response.length - 1];
        this.querySnapshot = response;
      }
    );
  }

  loadMore(data:object) {
    return collectionData(query(collection(this.firestore, 'customers'), orderBy('name'), limit(5), startAfter(data))).subscribe(
      response => {
        // @ts-ignore
        this.lastInResponse = response[response.length - 1];
        this.querySnapshot = this.querySnapshot.concat(response);
      }
    );
  }

  myTest() {
    console.log(this.lastInResponse);
  }

这段代码只有一个问题 ERROR FirebaseError: Function startAfter() called with invalid data。函数 myTest() 将最后一个客户的正确数据写入控制台，但仍然出现错误。

什么是正确的数据类型？我该如何转换？

任何帮助将不胜感激！谢谢！

Answer 1

我设法找到了解决方案！

import {
  collection,
  collectionData,
  Firestore,
  limit,
  orderBy,
  query,
  startAfter
} from "@angular/fire/firestore";


querySnapshot:any;
lastInResponse:any;


  constructor( private stringEmitted: StringBridgeService, private firestore: Firestore ) {
  }

  ngOnInit(): void {
    this.stringEmitted.stringChanged(this.actualTitle);
    this.loadCustomers('customers', 'name', 5)
  }


  loadCustomers(collectionName:string, order:string, max:number) {
    return collectionData(query(collection(this.firestore, collectionName), orderBy(order), limit(max))).subscribe(
      response => {
        this.lastInResponse = response[response.length - 1];
        this.querySnapshot = response;
      }
    );
  }

  loadMore(data:any) {
    if(this.lastInResponse){
      return collectionData(query(collection(this.firestore, 'customers'), orderBy('name'), limit(3), startAfter(data['name']))).subscribe(
        response => {
          this.lastInResponse = response[response.length - 1];
          this.querySnapshot = this.querySnapshot.concat(response);
          // this.querySnapshot = response;
        }
      );
    }
    return null
  }

  myTest() {
    console.log(this.lastInResponse);
  }

startAfter() 就我而言，需要我列表中的姓氏。这里使用了真正的模块化方法。

谢谢大家！

Firebase - 如何使用 RxJS 分页 - 最后的和平

Firebase - How to paginate using RxJS - the final peace

pagination

angular