Блог

Я использую последнюю версию ng2-pagination (0.4.1) и angular2-webpack-starter (5.0.5).

Моя цель — попробовать ng2-pagination .

Я выполнил следующие шаги:

• устанавливается ng2-pagination с помощью npm install ng2-pagination --save;
• добавлено import 'ng2-pagination' в vendor.browser.ts ;

• добавлен import {Ng2PaginationModule} from 'ng2-pagination'; в app.module.ts , затем добавлен Ng2PaginationModule в массив импорта;

• изменено detail.component.ts так:

   import { Component } from '@angular/core';
  @Component({
  selector: 'detail',
  template: `
    <h1>Hello from Detail</h1>
    <ul>
    <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }">{{ item }}</li>
    </ul>
    <pagination-controls (pageChange)="p = $event" #api>
    </pagination-controls>`
  })
  export class Detail {
  collection = [];
  constructor() {
    for (let i = 1; i <= 100; i  ) {
      this.collection.push(`item ${i}`);
      }
    }
  }
    

Я получаю следующую ошибку:

 EXCEPTION: Uncaught (in promise): Error: Template parse errors:
The pipe 'paginate' could not be found
  

Мне кажется, что компонент не знает о ng2-paginate: чего мне не хватает?

Хорошо, я это исправил:

Ошибка была на третьем шаге; вместо:

• import {Ng2PaginationModule} from 'ng2-pagination'; чтобы app.module.ts , затем добавить Ng2PaginationModule в свой массив импорта;

Я должен был сделать следующее:

• import {Ng2PaginationModule} from 'ng2-pagination'; чтобы ./ detail/index.ts , затем добавить Ng2PaginationModule в свой массив импорта;

Думаю, я недостаточно хорошо знаком с последней версией angular2. Надеюсь, это кому-то поможет.