2017-03-15 42 views
0

我安裝了一個簡單的分頁組件的ng2-bootstrap。從文檔(https://valor-software.com/ng2-bootstrap/#/pagination#pager-component)設置組件看起來很簡單。分頁與角2無法設置每頁項目

但是,我無法設置每頁的項目。我跟着示例和進口像這樣

PaginationModule.forRoot(), 

模塊I加入必要的屬性

maxSize:number = 5; 
bigTotalItems:number = 726; 
bigCurrentPage:number = 1; 
numPages:number = 0; 
itemsPerPage: number = 10; // **** this is the one not working 

我添加了選擇器和屬性等的文檔顯示

<pagination 
      class="pagination-sm" 
      [totalItems]="bigTotalItems" 
      [(ngModel)]="bigCurrentPage" 
      [maxSize]="maxSize" 
      [boundaryLinks]="true" 
      [rotate]="false" 
      [itemsPerPage]="itemsPerPage" 
      (numPages)="numPages = $event"> 
     </pagination> 

一切顯示出來,但頁面不限於10.所有內容都顯示在一頁上。

在用於節點模塊/ github上頁組分(https://github.com/valor-software/ng2-bootstrap/blob/development/src/pagination/pagination.component.ts)每頁項目被構造像這樣

this.itemsPerPage = typeof this.itemsPerPage !== 'undefined' 
    ? this.itemsPerPage 
    : this.config.itemsPerPage; 

我確信我的分頁選擇器正下方的裝飾

*ngFor 

我只是不知道爲什麼我無法正確設置項目頁面

+0

'itemsPerPage:number = 10;'而不是-10 – Habeeb

+0

深夜類型在我的部分。我的組件具有正確的語法。我改變了我的答案以匹配。 – Winnemucca

回答

0

要從ng2-bootstrap上的issue繼續此操作,您並不指示如何根據分頁組件的設置來劃分數據以進行顯示。分頁組件是用於跟蹤您希望將信息細分爲多個頁面並通知所需頁面已更改的設備。它不會顯示你的頁面 - 你的代碼有這個責任。
issue中引用的插入程序顯示了一種這樣做的方法,其中根據所選頁面和每頁的項目數將數組中保存的信息的子集供給顯示。它通過調用一個函數在發生pageChanged事件時構建頁面內容來實現此目的。
您還詢問了有關itemsPerPage < 1條評論。這純粹是爲了指出,如果你以某種方式將itemsPerPage設置爲小於1的數字,那麼所有內容都將顯示在一頁上。闖入者並沒有陷入這種狀況,也沒有展示任何東西 - 我已經更新了這個潛行者,所以現在它的行爲應該是應該的。