Angular Material表格中每页条数选择下拉无法展开显示问题

安全阿岳

2026-10-5

解决步骤

1. 检查模块导入配置

Angular Material 分页器的每页条数下拉依赖MatSelectModule，同时所有弹出类组件都依赖动画模块才能正常渲染，需要确认在对应模块（AppModule或业务功能模块）中导入了以下依赖：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 必须导入动画模块
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// Material 相关组件模块
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatSelectModule,
    MatFormFieldModule
  ],
  // 其余 declarations、providers、bootstrap 配置保持不变
})
export class AppModule { }

2. 检查全局主题样式引入

Angular Material 的弹出层样式依赖全局主题，需要确认在angular.json的build配置中已经引入了预构建主题，示例配置如下：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ]
          }
        }
      }
    }
  }
}

如果使用自定义主题，确保主题配置中包含了mat-select和mat-paginator的样式规则。

3. 排查CSS冲突

打开浏览器开发者工具，点击下拉箭头后查看DOM树的body节点末尾是否生成了mat-select-panel相关节点：

如果有节点但不可见，说明是父容器设置了overflow: hidden或者自定义样式修改了弹出层的z-index导致被遮挡，调整对应CSS规则即可。
如果没有生成对应节点，回到前两步检查模块和动画导入是否正确。

4. 可选：显式绑定初始pageSize

部分低版本Angular Material需要显式指定初始pageSize才能正常触发下拉逻辑，修改分页器模板代码：

<mat-paginator 
  [pageSize]="5" 
  [pageSizeOptions]="[5, 10, 20]"
  showFirstLastButtons 
  aria-label="Select page of periodic elements">
</mat-paginator>

按照以上步骤排查即可解决分页下拉无法展开的问题。

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