Angular Material Paginator的pageSizeOptions无法显示及点击无响应问题

问题现象 #

MatPaginator组件的pageSizeOptions下拉选项无法显示，点击选择区域无任何交互反馈，DevTools元素面板中也找不到下拉选项的DOM结构。相关代码如下：

模板代码 #

<mat-paginator 
    [length]="totalApplications" 
    [pageSize]="pageSize" 
    [pageSizeOptions]="pageSizeOptions"
    showFirstLastButtons="true"
    (page)="onPageChange($event)">
</mat-paginator>

TS逻辑代码 #

dataSource: any[] = [];
totalApplications = this.fullData.length;
pageSizeOptions = [10, 20, 50];
pageSize = 20;
currentPage = 0;

@ViewChild(MatPaginator) paginator!: MatPaginator;

ngOnInit(): void {
  this.updatePageData();
}

onPageChange(event: any): void {
  this.currentPage = event.pageIndex;
  this.pageSize = event.pageSize;
  this.updatePageData();
}

updatePageData(): void {
  const startIndex = this.currentPage * this.pageSize;
  const endIndex = startIndex + this.pageSize;
  this.dataSource = this.fullData.slice(startIndex, endIndex);
}

排查样式代码 #

mat-paginator {
  display: block !important;
  background-color: #fff !important;
}

排查与解决步骤 #

1. 确认必要模块完整导入 #

MatPaginator的下拉选项依赖MatSelectModule，同时所有Material组件都需要BrowserAnimationsModule支持交互与动画逻辑。在当前组件所属模块（或共享模块）中必须导入以下模块：

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

@NgModule({
  imports: [
    // ...其他业务模块
    BrowserAnimationsModule,
    MatPaginatorModule,
    MatSelectModule
  ]
})
export class YourFeatureModule { }

2. 调整视图初始化时机 #

@ViewChild获取的MatPaginator实例在ngOnInit阶段可能尚未完成DOM渲染，改用ngAfterViewInit钩子确保组件已初始化完成：

ngAfterViewInit(): void {
  // 若使用MatTableDataSource，可在此关联分页器
  // this.dataSource.paginator = this.paginator;
}

3. 排查样式冲突 #

• 检查全局样式或父组件样式是否设置了overflow: hidden、display: none等属性，导致下拉面板（.mat-select-panel）被隐藏或挤出视口；
• 避免过度使用!important修改MatPaginator的默认样式，尤其是display属性，可能破坏组件内部布局逻辑。

4. 验证版本兼容性 #

确保@angular/core与@angular/material的版本完全一致，版本不匹配会导致组件功能异常。查看package.json中的版本声明：

"dependencies": {
  "@angular/core": "^16.2.0",
  "@angular/material": "^16.2.0",
  // ...其他依赖
}

5. 确认pageSizeOptions赋值时机 #

如果pageSizeOptions是通过异步请求获取的数据，需确保数据返回后重新赋值给组件属性，避免初始化时为空数组导致下拉面板不渲染。

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