角材料分頁器不工作

Question

我正在嘗試在我的應用程序上添加 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",

Answer 1

萬一其他人遇到這個問題，只需要在 app.module.ts 中導入模塊

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

和

@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

對我來說，它還需要MatChipsModule進行編譯。

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

Answer 4

從“@angular/material/paginator”導入 {MatPaginatorModule}；

Answer 5

它對我有用。 我使用以下版本：

"@angular/animations": "5.0.2",
"@angular/common": "^5.0.2",
"@angular/compiler": "^5.0.2",
"@angular/core": "^5.0.2",
"@angular/forms": "^5.0.2",
"@angular/http": "^5.0.2",
"@angular/material": "^5.0.0-rc0",
"@angular/cdk": "^5.0.0-rc0",
"@angular/platform-browser": "^5.0.2",
"@angular/platform-browser-dynamic": "^5.0.2",
"@angular/router": "^5.0.2",

Answer 6

我也使用了分頁符。 我導入：

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

它在我的app.module ， @NgModule - >也是導入，但是我得到了同樣的錯誤：

無法綁定到'length'，因為它不是'mat-paginator'的已知屬性。

1. 如果'mat-paginator'是一個Angular組件並且它有'length'輸入，那么請驗證它是否是該模塊的一部分。
2. 如果'mat-paginator'是Web組件，則將'CUSTOM_ELEMENTS_SCHEMA'添加到此組件的'@NgModule.schemas'以禁止顯示此消息。
3. 要允許任何屬性將“NO_ERRORS_SCHEMA”添加到此組件的“@NgModule.schemas”。

Answer 7

昨天我一直在努力解決這個問題，我發現解決方案是在project.module.ts文件中添加必要的記錄。 我認為你應該做這樣的事情。

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