角材料分页器不工作

Posted 2023-03-10

【中文标题】角材料分页器不工作

【英文标题】：Angular material Paginator is not working

【发布时间】：2018-05-26 07:33:29

【问题描述】：

我正在尝试在我的应用中添加 Angular Material Paginator。

MatPaginatorModule已添加到模块中。

<mat-paginator #paginator 
               [length]="100" 
               [pageSize]="10" 
               [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

但它给出了一个错误：

未捕获的错误：模板解析错误：

无法绑定到“长度”，因为它不是 '垫分页器'。

如果mat-paginator 是一个Angular 组件并且它有length 输入，那么验证它是这个模块的一部分。 如果mat-paginator 是Web 组件，则将CUSTOM_ELEMENTS_SCHEMA 添加到此组件的@NgModule.schemas 以禁止显示此消息。

也许我错过了什么？

"@angular/animations": "^5.0.1",
"@angular/cdk": "^5.0.0-rc0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/material": "^5.0.0-rc0",

【参考方案1】：

万一其他人遇到这个问题，只需在 app.module.ts 中导入模块

import  MatPaginatorModule  from '@angular/material';

和

@NgModule(
...
imports: [ 
....
MatPaginatorModule ]

【讨论】：

完美！！！从未意识到即使在导入 MatTableModule 之后也必须手动完成！感谢您的解决方案。顺便说一句，这是导入 Paginator 模块的（更新的？）语法：import MatPaginatorModule from '@angular/material/paginator';

谢谢，呃，角度材料和引导程序的文档需要认真打磨。

【参考方案2】：

我注意到我认为我应该提到的一件事，它可能有用与否。 如果您使用的是 Angular Materials 版本 5，则分页器模块存在于

import MatPaginatorModule from '@angular/material';

但从 Angular 8 开始，它出现在

import MatPaginatorModule from '@angular/material/paginator';

一定要在 app.module.ts 中添加模块

【参考方案3】：

对我来说，它还需要MatChipsModule 来编译。

import  MatChipsModule  from '@angular/material/chips';