Angular 材料分页器无法工作

Question

我正在尝试在我的应用程序上添加 Angular Material Paginator。

MatPaginatorModule 添加到模块中。

<mat-paginator #paginator 
               [length]="100" 
               [pageSize]="10" 
               [pageSizeOptions]="[5, 10, 25, 100]">
</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",

Answer 1

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

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

和

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

Answer 2

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

import {MatPaginatorModule} from '@angular/material';

但是从 Angular 8 开始，它出现在

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

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

Answer 3

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

Answer 4

对我来说，还需要

MatChipsModule

来编译。

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

Answer 5

我昨天正在努力解决这个问题，我找到了解决方案，即向 project.module.ts 文件添加必要的记录。我认为你应该做这样的事情。

import { NameOfYourComponent } from './path_to_your_component/nameofyour.component';
...
@NgModule({
  declarations: [
    NameOfYourComponent ,
...

Answer 6

我也是。我对 Angular Material 也有同样的问题

从“@angular/material/paginator”导入{MatPaginatorModule}；

@NgModule({ 声明：[ 应用程序组件， ... ], 进口：[ MatPaginator模块， ... ]

我的 html 文件中的标签 Angular Materia 不起作用。 。请帮忙