Angular Material 18：Mat-paginator [length]初始化异常问题排查

问题原因 #

• ViewChild 初始化时机错误：在ngOnInit中尝试给dataSource.paginator赋值时，组件视图还未完全渲染，@ViewChild(MatPaginator)获取到的paginator实例尚未初始化，此时的赋值操作无效。
• 重复设置分页长度导致冲突：HTML模板通过[length]="totalItems"绑定总条目数，但TS代码的loadData方法中又直接设置this.paginator.length，加上totalItems初始值为0，异步请求返回数据后，由于paginator未完成初始化，视图无法同步更新长度值。
• 手动修改页大小触发正常初始化：通过UI修改页大小时，paginator已完成实例化，此时会触发page事件，重新加载数据并同步分页状态，后续功能因此恢复正常。

解决方案 #

1. 调整生命周期钩子，视图初始化后绑定paginator #

将dataSource.paginator的赋值移到ngAfterViewInit中，确保paginator实例已就绪：

ngAfterViewInit(): void {
  this.dataSource.paginator = this.paginator;
}

2. 统一分页长度的数据源 #

移除TS中直接设置this.paginator.length的代码，仅通过HTML模板的[length]="totalItems"控制总条目数，保持数据绑定一致性：
修改loadData方法：

loadData(pageNumber: number, pageSize: number) {
  this.colorService.getColors(pageNumber, pageSize).subscribe(response => {
    this.dataSource.data = response.items;
    this.totalItems = response.paging.totalItems;
    if (this.paginator) {
      this.paginator.pageIndex = response.paging.pageNumber - 1;
    }
    this.cdr.detectChanges();
  });
}

3. 优化分页事件参数类型（可选） #

用PageEvent类型代替any，提升类型安全性：

import { PageEvent } from '@angular/material/paginator';

// ...

onPageChange(event: PageEvent) {
  this.loadData(event.pageIndex + 1, event.pageSize);
}

修改后的完整TS代码示例 #

import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { ColorsHttpService } from './path-to-your-service';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit, AfterViewInit {
  displayedColumns: string[] = ['id', 'name'];
  dataSource = new MatTableDataSource<any>();
  totalItems = 0;

  @ViewChild(MatPaginator) paginator!: MatPaginator;

  constructor(private colorService: ColorsHttpService, private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.loadData(1, 10);
  }

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
  }

  loadData(pageNumber: number, pageSize: number) {
    this.colorService.getColors(pageNumber, pageSize).subscribe(response => {
      this.dataSource.data = response.items;
      this.totalItems = response.paging.totalItems;
      if (this.paginator) {
        this.paginator.pageIndex = response.paging.pageNumber - 1;
      }
      this.cdr.detectChanges();
    });
  }

  onPageChange(event: PageEvent) {
    this.loadData(event.pageIndex + 1, event.pageSize);
  }
}

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