Ang2中的ng2-pagination 2

我正在關注如何在angular 2中實現ng2-pagination的文檔。以下是我的代碼。但是，我陷入了在我的終端中出現的一些錯誤。我可能做錯了什麼？我的角度的版本是2.3.0Ang2中的ng2-pagination 2

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" >"): [email protected]: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". ("

來源

2017-03-05 XamarinDevil

也許它是，它並不像'keys'管在那裏？嘗試使用一些不需要該管道的虛擬數據並查看是否有效。我使用了相同的分頁，我真的沒有看到任何其他明顯的會導致該錯誤？這只是一個瘋狂的猜測，值得一試，但我並沒有真正明白爲什麼這會很重要，但是...... – Alex

沒有鑰匙，它可以和應用程序完美配合 – XamarinDevil

那麼......顯然它不起作用與另一個管道存在，這當然不好。而你的鑰匙管工作應該沒有分頁？如果情況是這樣的話，可能會在github項目中提出問題？我不認爲任何人都可以真正幫忙，如果是因爲'keys'管道，它不能正常工作......你需要嘗試另一個軟件包或更改'Country'來不需要管道...不支持muvch更多我可以說，對不起：（ – Alex

1.npm install ng2-pagination --save

2.import {Ng2PaginationModule} from'ng2-pagination'; //進口NG2-分頁到您的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>

來源

2017-03-05 20:56:10 XamarinDevil

我們可以利用這個代碼段實現的角度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"]; 
}

來源

2017-06-14 17:38:01

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

來源

2017-10-23 07:21:23

–

Ang2中的ng2-pagination 2

回答

相關問題