Angular Material 数据表：Firestore数据源无法分页问题

你的推测完全准确！这确实是异步数据加载导致的问题。

Angular Material分页器初始化时，你的Firestore数据还没完成获取，此时数组长度是0，分页器就会基于这个初始值完成初始化。等数据异步加载完成后，数组长度更新了，但分页器并不会自动感知到这个变化（除非你明确告诉它）。

下面是几种可靠的解决方法，按推荐程度排序：

方法1：使用MatTableDataSource关联分页器（最推荐） #

MatTableDataSource专门设计用来配合Angular Material表格和分页器，它会自动监听数据变化并同步更新分页器状态。

组件代码示例：

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { InvoiceItem } from './path-to-invoice-item';
import { YourFirestoreService } from './path-to-service';

@Component({
  selector: 'app-invoice-table',
  templateUrl: './invoice-table.component.html'
})
export class InvoiceTableComponent implements OnInit {
  displayedColumns = ['id', 'itemName', 'quantity', 'price'];
  dataSource = new MatTableDataSource<InvoiceItem>();
  
  // 通过ViewChild获取分页器实例
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  constructor(private firestoreService: YourFirestoreService) {}

  ngOnInit(): void {
    // 订阅Firestore的Observable数据
    this.firestoreService.getInvoiceItems().subscribe((items: InvoiceItem[]) => {
      // 更新数据源的数据集
      this.dataSource.data = items;
      // 确保分页器已完成Angular初始化后，关联到数据源
      setTimeout(() => {
        this.dataSource.paginator = this.paginator;
      });
    });
  }
}

模板代码示例：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- ID列 -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let item"> {{item.id}} </td>
  </ng-container>

  <!-- 其他列定义... -->

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<!-- 分页器无需额外绑定length，数据源会自动同步 -->
<mat-paginator [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>

这里用setTimeout是为了确保Angular已经完成了分页器的视图初始化，避免直接赋值时出现paginator为undefined的情况。

方法2：手动更新分页器长度 #

如果你不想使用MatTableDataSource，也可以在数据加载完成后手动设置分页器的length属性：

// 组件中
@ViewChild(MatPaginator) paginator!: MatPaginator;
invoiceItems: InvoiceItem[] = [];

ngOnInit(): void {
  this.firestoreService.getInvoiceItems().subscribe((items: InvoiceItem[]) => {
    this.invoiceItems = items;
    // 数据加载完成后，手动更新分页器长度
    this.paginator.length = items.length;
  });
}

模板中需要把表格数据绑定到invoiceItems，同时确保分页器的length和数组同步：

<table mat-table [dataSource]="invoiceItems" class="mat-elevation-z8">
  <!-- 列定义... -->
</table>

<mat-paginator [length]="invoiceItems.length" [pageSizeOptions]="[5,10,25]"></mat-paginator>

这种方式需要自己维护数据和分页器的同步关系，不如第一种方法省心。

方法3：结合async管道使用 #

如果你的模板中直接用async管道订阅Observable，需要在视图初始化完成后监听数据变化来更新分页器：

// 组件中
@ViewChild(MatPaginator) paginator!: MatPaginator;
invoiceItems$: Observable<InvoiceItem[]>;

ngOnInit(): void {
  this.invoiceItems$ = this.firestoreService.getInvoiceItems();
}

ngAfterViewInit(): void {
  // 监听数据变化，更新分页器长度
  this.invoiceItems$.subscribe(items => {
    this.paginator.length = items.length;
  });
}

模板：

<table mat-table [dataSource]="invoiceItems$ | async" class="mat-elevation-z8">
  <!-- 列定义... -->
</table>

<mat-paginator [pageSizeOptions]="[5,10,25]"></mat-paginator>

核心原因就是：分页器初始化时依赖的数组长度是异步数据加载前的初始值（通常是0），而Angular不会自动监听数组的异步更新来同步分页器状态。只要在数据加载完成后，主动通知分页器更新长度或关联数据源，就能解决这个问题。

内容的提问来源于stack exchange，提问作者nick.cook