Question

我正在关注如何在角度2中实现ng2-pagination的文档。以下是我的代码。但是，我的终端显示出一些错误。我可以做错什么？我的角度版本是2.3.0

table.html

  <tr>

    <th>Country</th>
    <th>Continent</th>
</tr>

  <tbody>
    <tr *ngFor="let key of Country | keys | paginate: {itemsPerPage: 10 , currentPage: page}; let i = index" >
      <td>{{i + 1}}</td>
      <td>{{Country[key].name}}</td>
      <td>{{Country[key].continent}}</td>

     </tr>

  </tbody>

</table>
<div class="has-text-centered">
    <pagination-controls (pageChange)="page = $event"></pagination-controls>
</div>

组件

 Component({

        changeDetection: ChangeDetectionStrategy.OnPush



    })


    export class CountryComponent {

        @Input('data') Country:string[] =[];
        page: number = 1;

        //store incoming data

        Country: Country[] = [];
constructor(private httpService: HttpService, private router: Router) {



        this.httpService.getCountry()
            .subscribe(data => {
                    this.Country = data;
                }
            );

    }

错误

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngForPaginate' since it isn't a known property of 'tr'. ("

  <tbody>
    <tr [ERROR ->]*ngFor="let key of Country | keys  paginate: {itemsPerPage: 10 , currentPage: page}; let i = index" >"): CountryComponent@92:8
Property binding ngForPaginate not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("

Answer 1

我们可以使用此代码段在角度2中实现分页。它对我来说非常适合。

运行npm install ngx-pagination --save

<强> app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module
import {MyComponent} from './my.component';

@NgModule({
    imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module
    declarations: [MyComponent],
    bootstrap: [MyComponent]
})
export class MyAppModule {}

<强> my.component.ts

import {Component} from '@angular/core';

@Component({
    selector: 'my-component',
    template: `
    <ul>
      <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> {{item}} </li>
    </ul>

    <pagination-controls (pageChange)="p = $event"></pagination-controls>
    `
})
export class MyComponent {
    p: number = 1;
    collection: any[] = ["a","b","","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"];  
}

Answer 2

1.npm install ng2-pagination --save

2.import {Ng2PaginationModule}来自'ng2-pagination'; //将ng2-pagination导入app.module.ts文件

@NgModule（{ 进口：[Ng2PaginationModule]

<tr>

    <th>Country</th>
    <th>Continent</th>
</tr>

  <tbody>
    <tr *ngFor="let key of Country | keys | paginate: {itemsPerPage: 10 , currentPage: page}; let i = index" >
      <td>{{i + 1}}</td>
      <td>{{Country[key].name}}</td>
      <td>{{Country[key].continent}}</td>

     </tr>

  </tbody>

</table>
<pagination-controls (pageChange)="page = $event" id="1"
                      maxSize="5"
                      directionLinks="true"
                     >
                </pagination-controls>

Answer 3

＆＃13;

<tr *ngFor="let key of (Country | keys | paginate: {itemsPerPage: 10 , currentPage: page}); let i = index" >

＆＃13;

Angular 2中的ng2-Pagination

3 个答案: