自定义MatPaginator组件调用报错TypeError: this.paginator is undefined求助

可能的原因及修复方案 #

1. @ViewChild的static配置错误 #

你当前设置的static: true会让Angular在组件初始化阶段（ngOnInit之前）就尝试获取视图元素。如果自定义分页组件处于条件渲染（比如*ngIf）内部，或者依赖其他异步数据渲染，此时元素还未挂载到DOM，就会导致this.paginator为undefined。

修复：
将static改为false，让Angular在视图初始化完成后（ngAfterViewInit阶段）再获取元素：

@ViewChild(MatPaginatorComponent, { static: false }) paginator: MatPaginatorComponent;

2. 异步数据流中未做空值校验 #

在data$的map操作里直接访问this.paginator，即使在ngAfterViewInit中，也可能因为数据流触发时机早于paginator的初始化完成（比如data$同步触发），导致报错。

修复：
在操作paginator前添加空值判断，或将逻辑移到subscribe回调中并增加校验：

this.data$
  .pipe(
    untilDestroyed(this),
    map((settings) => {
      this.data = settings;
      return this.data;
    }),
  )
  .subscribe(() => {
    if (this.paginator) {
      this.paginator.pageIndex = 1;
      this.paginator.pageSize = 10;
    }
  });

3. 模板中未正确引用组件 #

检查组件模板，确认是否正确添加了自定义分页组件的标签，比如：

<app-mat-paginator></app-mat-paginator>

确保标签名称与组件的selector一致，且组件已在当前模块的declarations或imports中正确引入（虽然你提到其他项目正常，但仍需确认当前项目配置）。

4. 调整初始化逻辑顺序 #

将paginator的初始化逻辑统一放到subscribe回调中，确保data和paginator都准备就绪后再操作：

ngAfterViewInit(): void {
  this.data$
    .pipe(untilDestroyed(this))
    .subscribe((settings) => {
      this.data = settings;
      if (this.paginator && this.data) {
        this.paginator.pageSize = 10;
        this.paginator.pageIndex = 1;
        this.matDataSource.paginator = this.paginator;
      }
      this.cdr.detectChanges();
    });
}

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