Angular中Mat Paginator页码未显示问题求助

1. 确认模块导入完整性 #

确保功能模块（如AppModule）中已导入MatPaginatorModule和BrowserAnimationsModule——Mat Paginator依赖动画模块才能正常渲染：

import { MatPaginatorModule } from '@angular/material/paginator';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    // ...其他必要模块
    MatPaginatorModule,
    BrowserAnimationsModule
  ]
})
export class AppModule { }

2. 绑定数据源与Paginator实例 #

在组件类中通过ViewChild获取Paginator实例，并在视图初始化完成后绑定到数据源：

import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { ViewChild, AfterViewInit } from '@angular/core';

export class AppComponent implements AfterViewInit {
  dataSource = new MatTableDataSource<any>(YOUR_DATA_SET);
  @ViewChild(MatPaginator) paginator!: MatPaginator;

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

3. 排查样式冲突问题 #

检查自定义样式（包括全局样式、组件CSS或自定义指令）是否隐藏了页码元素：

• 确认未给.mat-paginator-range-label、.mat-paginator-page-size等核心元素设置display: none
• 暂时移除自定义样式，验证是否为样式覆盖导致页码不显示

4. 验证Paginator属性配置 #

确保模板中Paginator的核心属性正确绑定：

<mat-paginator [length]="dataSource.data.length"
              [pageSize]="10"
              [pageSizeOptions]="[5, 10, 20]"
              showFirstLastButtons>
</mat-paginator>

针对你的代码示例，优先检查AppModule的模块导入是否完整，以及ngAfterViewInit中是否完成了数据源与Paginator的关联。若使用了自定义指令修改Paginator结构，需确认指令逻辑未破坏页码元素的渲染流程。

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