MatPagination问题：修改MatPaginator时mat-table未更新条目限制

我之前也碰到过一模一样的情况！当用Angularfire的valueChanges()返回的Observable作为数据源时，直接订阅赋值给MatTableDataSource会导致分页器调整条目数时毫无反应。核心问题在于没有让数据源和分页器建立持久的关联，同时没处理好异步数据更新的场景。下面是我亲测有效的解决步骤：

1. 正确初始化数据源和分页器关联 #

首先在组件类中定义MatTableDataSource和分页器的引用，然后在视图初始化完成后绑定分页器：

import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { Subscription } from 'rxjs';
import { AngularFirestoreCollection } from '@angular/fire/compat/firestore';
import { Item } from './your-item.model'; // 替换成你的Item模型

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, OnDestroy {
  dataSource = new MatTableDataSource<Item>();
  itemsCollection!: AngularFirestoreCollection<Item>;
  private itemsSubscription?: Subscription;

  // 获取分页器的视图引用
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  ngOnInit() {
    // 初始化你的集合引用
    this.itemsCollection = /* 你的Angularfire集合初始化代码 */;
  }

  ngAfterViewInit() {
    // 视图初始化完成后，将分页器绑定到数据源
    this.dataSource.paginator = this.paginator;
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，防止内存泄漏
    this.itemsSubscription?.unsubscribe();
  }
}

2. 正确处理Observable数据源的更新 #

不要每次数据变化都重新创建MatTableDataSource，而是复用同一个实例，更新它的data属性。同时，确保在异步数据加载完成后，分页器的关联依然有效：

ngOnInit() {
  this.itemsCollection = /* 你的集合初始化代码 */;
  
  this.itemsSubscription = this.itemsCollection.valueChanges()
    .subscribe((items: Item[]) => {
      // 更新数据源的数据集
      this.dataSource.data = items;
      
      // 防止数据加载晚于视图初始化，确保分页器绑定生效
      if (this.paginator) {
        this.dataSource.paginator = this.paginator;
      }
    });
}

3. 模板中的正确写法 #

确保模板中的表格和分页器正确绑定：

<!-- 表格部分 -->
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 替换成你的列定义，例如： -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let item"> {{item.name}} </td>
  </ng-container>

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

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

<!-- 分页器部分 -->
<mat-paginator 
  [pageSizeOptions]="[5, 10, 25]" 
  showFirstLastButtons
  aria-label="Select page of items">
</mat-paginator>

关键注意点 #

• 不要重新创建数据源实例：如果每次数据更新都执行this.dataSource = new MatTableDataSource(items)，会导致之前绑定的分页器失效，必须复用同一个实例更新data属性。
• 视图初始化后绑定分页器：MatPaginator是DOM元素，必须在ngAfterViewInit生命周期钩子中才能获取到有效的引用，提前绑定会导致关联失败。
• 取消订阅防止内存泄漏：Angularfire的Observable会持续监听数据变化，组件销毁时一定要取消订阅。

如果你的数据集很大，建议考虑服务器端分页（结合Angularfire的limit()、startAt()等方法），避免一次性加载所有数据到客户端。

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