ng2-pagination not firing page change

所以我開始使用Angular2，並試圖通過ng2-pagination組件添加分頁，經過大量的試驗和錯誤，我已經達到了我的數據正確顯示的階段，分頁控件顯示正確，但頁面更改沒有被解僱，所以我總是停留在第一頁。ng2-pagination not firing page change

這裏是我的html

<div id="item_box" *ngFor="let item of listItems | paginate: 
      {itemsPerPage: 3, currentPage: page};"> 
      <! -- Elements to display my data items, all works OK --> 
    </div> 

    <div id="pager" class="pagination"> 
     <pagination-template #p="paginationApi" (pageChange)="pageChange.emit($event)"> 

     <ul> 
      <li [class.disabled]="p.isFirstPage()"> 
       <a (click)="p.setCurrent(1)">First</a> 
      </li> 
      <li [class.disabled]="p.isFirstPage()"> 
       <a (click)="p.previous()">Previous</a> 
      </li> 


      <li *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value"> 
       <a (click)="p.setCurrent(page.value)">{{page.value}}</a> 
      </li> 
      <li [class.disabled]="p.isLastPage()"> 
       <a (click)="p.next()">Next</a> 
      </li> 
      <li [class.disabled]="p.isLastPage()"> 
        <a (click)="p.getLastPage()">Last</a> 
       </li> 
     </ul> 
    </pagination-template> 
</div>

視覺一切都看起來不錯。

任我list.component代碼

import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core'; 
import { Subscription } from 'rxjs'; 
import { Router, ActivatedRoute, Params } from "@angular/router"; 

import { PaginationModule } from 'ng2-bootstrap/components/pagination'; 


@Component({ 
    selector: 'app-list', 
    templateUrl: './list.component.html', 
    styleUrls: ['./list.component.css'] 
}) 

export class ListComponent implements OnInit, OnDestroy { 
    listItems = []; 
    private subscription: Subscription; 

@Input() id: string; 
@Input() page; 
@Input() maxSize: number; 

@Output() pageChange: EventEmitter<number> = new EventEmitter<number>(); 

    constructor(private apiService:ApiService, private router:Router, private activatedRoute: ActivatedRoute) 
    { 

    } 

    ngOnInit() 
    { 
    //Code removed for brevity, but here I execute WS and get data here, populated in this.listItems 
    this.listItems == result; 
    ... 
    } 

    ngOnDestroy() { 
    this.subscription.unsubscribe(); 
    } 
}

我沒有得到任何錯誤。但是當我點擊更改頁面時，什麼也沒有發生。

我敢肯定，它一定是簡單的東西，我已經錯過了某個地方，但什麼，在哪裏？

https://github.com/michaelbromley/ng2-pagination上的示例/代碼沒有幫助，我找到的任何其他示例也無濟於事。

任何想法？我做錯了什麼？

來源

2016-11-17 jason.kaisersmith

嗨。我是lib作者。問題：在PaginatePipe中設置'currentPage：page' - 我的代碼中沒有看到「page」var。它是否作爲輸入傳入？目前，您的代碼似乎只是重新發出pageChange事件，但我看不到任何會改變「page」值的任何部分 - 爲了使分頁正常工作，必須進行這一操作。 –

嗨邁克爾，是的，我在我的課上，但錯過了上面的代碼（複製過去的問題）。但是這指出了我正確的方向，並且我已經解決了這個問題。看到我下面發佈的答案 –

所以請求。

我無法得到它與發射器的工作，但在我的HTML我改變了這一點;

<pagination-template #p="paginationApi" (pageChange)="pageChange.emit($event)">

這個

<pagination-template #p="paginationApi" (pageChange)="onPageChange($event)">

在我的代碼，然後我加了這一點;

onPageChange(e) 
    { 
    if (e) 
     this.page = e; 
    }

然後，我有一個問題與變量page沒有被初始化，所以我說這在我的構造

this.page = 1;

我不知道爲什麼發射器將不能正常工作，由於我的缺少Angular的經驗，我無法找到這個，但現在這對我有用。

而一個好的工作解決方案的證明是，我能夠將分頁添加到另一個組件中，並且它也可以在沒有問題的情況下第一次運行！

來源

2016-11-18 10:14:52

你可以檢查物品清單嗎？（例如，如果u有9個項目和itemsPerPage = 10），它肯定會做什麼:) 請覈實更多的時間我已成功地解決這一問題後，向服務器發送

來源

2016-11-17 09:47:58

不，這不是問題。我在不同的列表上嘗試過使用不同數量的項目，並且爲了測試，我已將每頁的項目數量限制爲3.儘管擁有超過20個項目，但我遇到了這個問題。根據我擁有的物品數量，分頁中顯示的頁數是正確的（並且對於每個清單都是正確的） –

我正在使用相同的庫，它工作正常。但是我使用http與服務器通信。請求包含（itemsPerPage和currentPage），並且響應包含（服務器中的totalItems和鏈接到此頁面的項目），在您的情況下，項目是靜態的，因此每個請求只需要第一個項目。 –

我不確定分頁是否與靜態項目列表一致（因爲背後的想法是獲取分段中的完整列表） –

ng2-pagination not firing page change

回答

相關問題