Angular+Material Table服务端分页报错求助：paginator未定义及NG0100

1. 解决 ERROR TypeError: this.paginator is undefined #

该错误核心是组件初始化时未正确获取到MatPaginator实例，按以下步骤排查修复：

• 确保模板引用与ViewChild匹配
  在HTML中给mat-paginator添加模板引用变量：

  <mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  

  组件类中通过@ViewChild获取实例，注意添加非空断言避免类型报错：

  import { ViewChild, AfterViewInit } from '@angular/core';
  import { MatPaginator } from '@angular/material/paginator';
  
  export class IndexComponent implements AfterViewInit {
    @ViewChild('paginator') paginator!: MatPaginator;
  
    ngAfterViewInit() {
      // 分页逻辑必须在视图初始化后执行，此时paginator已存在
      this.loadTableData();
    }
  }
  

• 避免过早访问paginator
  不要在ngOnInit中直接操作paginator，此时视图DOM尚未渲染完成，必须放在ngAfterViewInit钩子中执行数据加载。

• 服务端分页关联数据源
  数据加载完成后，手动绑定paginator到数据源，并设置总条数（服务端返回的totalCount）：

  loadTableData() {
    this.agamaService.getData(this.paginator.pageIndex, this.paginator.pageSize).subscribe(res => {
      this.dataSource.data = res.data;
      this.paginator.length = res.totalCount; // 服务端分页必须手动设置总条数
    });
  }
  

2. 解决 ERROR Error: NG0100表达式变更错误 #

该错误是Angular变更检测周期内重复触发变更导致的，可通过两种方式修复：

方式一：使用async管道自动处理变更检测 #

将数据请求转为Observable，通过async管道绑定，让Angular自动管理变更：

import { startWith, switchMap } from 'rxjs';

export class IndexComponent implements AfterViewInit {
  data$!: Observable<any[]>;
  totalCount$!: Observable<number>;

  ngAfterViewInit() {
    // 监听分页事件，自动触发数据请求
    this.data$ = this.paginator.page.pipe(
      startWith({ pageIndex: 0, pageSize: 10 }),
      switchMap(page => this.agamaService.getData(page.pageIndex, page.pageSize)),
      map(res => res.data)
    );

    this.totalCount$ = this.paginator.page.pipe(
      startWith({ pageIndex: 0, pageSize: 10 }),
      switchMap(page => this.agamaService.getData(page.pageIndex, page.pageSize)),
      map(res => res.totalCount)
    );
  }
}

HTML中绑定：

<mat-table [dataSource]="data$ | async">
  <!-- 表格列定义 -->
</mat-table>
<mat-paginator #paginator [length]="totalCount$ | async" [pageSizeOptions]="[5,10,20]"></mat-paginator>

方式二：手动触发变更检测 #

如果坚持使用subscribe，在数据更新后手动调用ChangeDetectorRef触发变更：

import { ChangeDetectorRef } from '@angular/core';

export class IndexComponent implements AfterViewInit {
  constructor(private cdr: ChangeDetectorRef) {}

  loadTableData() {
    this.agamaService.getData(...).subscribe(res => {
      this.dataSource.data = res.data;
      this.paginator.length = res.totalCount;
      this.cdr.detectChanges(); // 手动触发变更检测，结束当前周期
    });
  }
}

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