Angular中mat-table的pageSizeOptions是否有大小限制？内存溢出如何解决？

1. 切换为服务端分页（根治方案） #

当前你是把20000条数据一次性加载到前端做客户端分页，本质上所有数据都存在内存里，随着翻页次数增加，DOM元素和数据引用积累到一定程度就会触发内存溢出。

• 后端接口新增分页参数支持：接收pageIndex（当前页码）、pageSize（每页条数），返回对应页的数据集和总数据条数。
• 前端监听MatPaginator的page事件，每次页码/页大小变化时，调用后端接口获取对应页数据，更新MatTableDataSource的data属性，同时把paginator.length设置为总条数。
• 这种方式下前端只会持有当前页的250/100条数据，内存占用会大幅降低。

2. 客户端渲染优化（临时过渡） #

如果暂时无法修改后端，试试这些手段缓解问题：

• 启用虚拟滚动：用Angular CDK的cdk-virtual-scroll-viewport包裹mat-table，配置itemSize为表格行的固定高度（比如itemSize="50"）。虚拟滚动只会渲染当前视口内的行，即使加载了全量数据，DOM中也只有几十行，能显著减少内存消耗。
• 限制最大页大小：把pageSizeOptions的最大值从250下调到100甚至50，同时在页面上添加提示，引导用户通过筛选条件缩小数据范围后再查看。
• 清理内存引用：每次更新表格数据时，用全新的数组替换dataSource.data（而不是修改原数组）；在组件销毁时，取消所有相关的RxJS订阅，清空dataSource的引用。

3. 排查内存泄漏 #

如果以上方法仍有问题，检查是否存在内存泄漏：

• 打开浏览器DevTools的Memory面板，分别在翻页前、翻页多次后拍摄内存快照，对比是否有大量未释放的表格行组件、订阅对象或DOM节点。
• 检查自定义单元格组件，确保事件绑定、定时器、第三方插件等资源在组件销毁时被正确清理。

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