Угловой материал Paginator не работает

Я пытаюсь добавить Angular Material Paginator в свое приложение.

MatPaginatorModule добавлен в модуль.

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

Но это дает ошибку:

Неперехваченная ошибка: ошибки синтаксического анализа шаблона:

Невозможно привязать к «длине», так как это не известное свойство «mat-paginator».

  1. Если mat-paginator является компонентом Angular и у него есть входные данные length, убедитесь, что он является частью этого модуля.
  2. Если mat-paginator является веб-компонентом, добавьте 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",

angular pagination angular-material2 angular-material-paginator angular5
person Umer MehAr    schedule 12.12.2017    source источник

Ответы (3)


arrow_upward
81
arrow_downward

На случай, если кто-то еще столкнется с этой проблемой, все, что нужно, - это импортировать модуль в app.module.ts

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

а также

@NgModule({
...
imports: [ 
....
MatPaginatorModule ]
person Daniel    schedule 01.02.2018
comment
ИДЕАЛЬНО!!! Никогда не понимал, что это нужно делать вручную даже после импорта MatTableModule! Спасибо за ваше решение. Кстати, это (обновленный?) Синтаксис для импорта модуля Paginator: import { MatPaginatorModule } from '@angular/material/paginator'; - person Devner; 07.06.2018
comment
спасибо, urhg документация по материалам angular и bootstrap нуждается в серьезной доработке. - person skydev; 17.10.2018

arrow_upward
15
arrow_downward

Я заметил одну вещь, о которой, думаю, стоит упомянуть, может быть, это полезно или нет. Если вы используете Angular Materials версии 5, модуль paginator присутствует в

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

Но начиная с Angular 8 он присутствует в

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

Не забудьте добавить модуль и в app.module.ts

person Saurabh Kumar    schedule 11.09.2019

arrow_upward
0
arrow_downward

Для меня также потребовалось MatChipsModule для компиляции.

import { MatChipsModule } from '@angular/material/chips';
person Denis V    schedule 14.09.2020