标签: angular-material-paginator

我想在我的应用程序上添加Angular Material Paginator.

在模块中添加了MatPaginatorModule.

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

但它给出了一个错误:

未捕获错误:模板解析错误:

无法绑定到'length',因为它不是'mat-paginator'的已知属性.

1. 如果mat-paginator是Angular组件并且它有length输入,则验证它是否是此模块的一部分.
2. 如果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",

我有一个使用角项目mat-table和mat-paginator对于特定视图，问题是该视图具有网格视图和表格视图与肘节，网格视图是默认和表是使用NgIf时隐时现的网格视图是活动的。如果我将默认设置为表格视图，则分页工作正常，除非我切换到网格视图并返回，如果默认设置为网格，则在我切换到表格视图时会中断。我猜是因为当这段代码运行时表是隐藏的：

this.sliceList = new MatTableDataSource<Slice>(result);
this.sliceList.paginator = this.paginator;

我尝试了控制台日志记录this.sliceList，但sliceList.paginator在默认网格视图时未定义，因此我认为这是问题所在。我怎样才能解决这个问题？

我有一个看起来像的角材料分页器

我想样式，它应该看起来像

我现在很难设计它的样式。我只是能够移动分页器中的元素（开始和结束位置），除此之外，我无法进行任何修改。

请让我知道如何做所需的样式？

这是stackblitz链接https://stackblitz.com/edit/angular-tjhkpo