Angular5开发宝可梦网站：Firestore结合Angular Material 2分页器回退问题求助

我来帮你搞定Firestore结合Angular Material分页器的上一页回退问题！Firestore的分页逻辑和传统的offset偏移分页不一样，它依赖文档快照游标来定位数据，所以不能直接用页码偏移来计算，得专门维护游标信息来实现前后翻页。下面是具体的实现步骤和代码示例：

一、先定义必要的组件变量 #

首先在你的组件里声明这些变量，用来管理分页状态和游标：

import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { PageEvent } from '@angular/material/paginator';
import firebase from 'firebase/app';

// ... 其他组件代码

// 每页显示数量
pageSize = 8;
// 当前页码索引（用来配合Material分页器）
currentPageIndex = 0;
// 保存当前页的第一个/最后一个文档快照（游标）
firstVisible: firebase.firestore.DocumentSnapshot | null = null;
lastVisible: firebase.firestore.DocumentSnapshot | null = null;
// 是否有上一页/下一页（控制分页按钮状态）
hasPrev = false;
hasNext = false;
// 存储获取到的宝可梦数据
pokemonList: any[] = [];
// Firestore集合引用
private todosCollection: AngularFirestoreCollection<any>;

constructor(private afs: AngularFirestore) { }

二、初始加载第一页数据 #

页面初始化时，先加载第一页的8条数据，同时记录当前页的游标：

ngOnInit() {
  this.loadInitialData();
}

loadInitialData() {
  // 注意：必须先orderBy排序，Firestore游标依赖排序字段
  this.todosCollection = this.afs.collection('entrad', ref => 
    ref.orderBy('name') // 这里用name字段排序，你可以换成自己的排序字段
       .limit(this.pageSize)
  );

  this.todosCollection.snapshotChanges().subscribe(snapshots => {
    // 把快照转换成可用的数据格式
    this.pokemonList = snapshots.map(snap => ({
      id: snap.payload.doc.id,
      ...snap.payload.doc.data()
    }));

    if (snapshots.length > 0) {
      // 记录当前页的首尾游标
      this.firstVisible = snapshots[0].payload.doc;
      this.lastVisible = snapshots[snapshots.length - 1].payload.doc;
      // 检查是否有下一页数据
      this.checkHasNext();
      this.hasPrev = false; // 第一页没有上一页
    } else {
      this.hasPrev = false;
      this.hasNext = false;
    }
  });
}

三、实现下一页加载逻辑 #

点击下一页时，用当前页的最后一个游标作为起始点，加载下一页数据：

loadNextPage() {
  if (!this.lastVisible) return;

  this.todosCollection = this.afs.collection('entrad', ref => 
    ref.orderBy('name')
       .startAfter(this.lastVisible) // 从当前最后一条之后开始查询
       .limit(this.pageSize)
  );

  this.todosCollection.snapshotChanges().subscribe(snapshots => {
    this.pokemonList = snapshots.map(snap => ({
      id: snap.payload.doc.id,
      ...snap.payload.doc.data()
    }));

    if (snapshots.length > 0) {
      this.firstVisible = snapshots[0].payload.doc;
      this.lastVisible = snapshots[snapshots.length - 1].payload.doc;
      this.checkHasNext();
      this.hasPrev = true; // 现在不是第一页，显示上一页按钮
    }
  });
}

四、关键：实现上一页回退逻辑 #

这就是你需要的核心功能！通过当前页的第一个游标，用endBefore和limitToLast来获取上一页的8条数据：

loadPrevPage() {
  if (!this.firstVisible) return;

  this.todosCollection = this.afs.collection('entrad', ref => 
    ref.orderBy('name')
       .endBefore(this.firstVisible) // 截止到当前页第一条之前
       .limitToLast(this.pageSize) // 取最后8条（也就是上一页的全部数据）
  );

  this.todosCollection.snapshotChanges().subscribe(snapshots => {
    this.pokemonList = snapshots.map(snap => ({
      id: snap.payload.doc.id,
      ...snap.payload.doc.data()
    }));

    if (snapshots.length > 0) {
      this.firstVisible = snapshots[0].payload.doc;
      this.lastVisible = snapshots[snapshots.length - 1].payload.doc;
      this.checkHasPrev(); // 检查是否还有上一页
      this.hasNext = true; // 现在不是最后一页，显示下一页按钮
    } else {
      // 回到第一页的边界情况
      this.hasPrev = false;
    }
  });
}

五、辅助方法：检查是否有前后页 #

用来判断分页按钮是否应该启用：

// 检查是否有下一页
checkHasNext() {
  this.afs.collection('entrad', ref => 
    ref.orderBy('name')
       .startAfter(this.lastVisible)
       .limit(1) // 只查1条，判断是否存在下一页
  ).get().subscribe(snap => {
    this.hasNext = !snap.empty;
  });
}

// 检查是否有上一页
checkHasPrev() {
  this.afs.collection('entrad', ref => 
    ref.orderBy('name')
       .endBefore(this.firstVisible)
       .limit(1) // 只查1条，判断是否存在上一页
  ).get().subscribe(snap => {
    this.hasPrev = !snap.empty;
  });
}

六、绑定Angular Material分页器 #

在模板里把分页器和组件逻辑绑定起来：

<!-- 你的宝可梦列表展示 -->
<div *ngFor="let pokemon of pokemonList">
  <!-- 展示宝可梦信息 -->
</div>

<!-- Angular Material分页器 -->
<mat-paginator
  [pageSize]="pageSize"
  [pageSizeOptions]="[8, 16, 24]"
  [showFirstLastButtons]="true"
  [disabled]="!pokemonList.length"
  [hasPrevious]="hasPrev"
  [hasNext]="hasNext"
  (page)="handlePageEvent($event)">
</mat-paginator>

然后在组件里实现分页事件的处理：

handlePageEvent(event: PageEvent) {
  // 根据页码索引判断是上一页还是下一页
  if (event.pageIndex > this.currentPageIndex) {
    this.loadNextPage();
  } else {
    this.loadPrevPage();
  }
  this.currentPageIndex = event.pageIndex;
}

几个重要注意点 #

• 必须排序：Firestore的游标依赖排序字段，所以一定要在查询里加上orderBy，否则游标无法工作。
• 实时更新的取舍：如果用snapshotChanges会实时监听数据变化，但分页时如果数据被新增/删除，可能会导致游标失效。如果不需要实时更新，可以改用get()方法获取单次数据。
• 页码跳转的限制：Firestore不支持传统的offset跳转，所以如果要实现直接跳转到某一页，需要额外维护每一页的游标数组，但这种方式在数据变化时容易出问题，建议优先用前后翻页逻辑。

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