角度2分頁不起作用

我正試圖從https://github.com/mariuszfoltak/angular2-datatable/blob/master/README.md執行angular2-datatable到我的應用程序。但由於某種原因，rowsOnPage未採用我分配的號碼。角度2分頁不起作用

例如，當我說在一個頁面上顯示5條記錄時，它會顯示所有記錄。我不知道我錯過了什麼。有人可以幫我解決它。

<table class="table table-striped table-hover" [mfData]="products | SearchPipe : searchText" #mf="mfDataTable" [mfRowsOnPage]="5"> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     <mfDefaultSorter by="gt">GT</mfDefaultSorter> 
 
     </th> 
 
     <th> 
 
     <mfDefaultSorter by="name_e">Name E</mfDefaultSorter> 
 
     </th> 
 
     <th class="no-sort hidden-sm-down"> 
 
     <mfDefaultSorter by="name_z">Name Z</mfDefaultSorter> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr *ngFor="let product of products | SearchPipe : searchText"> 
 
     <td><a [routerLink]="['/app/master/products',product.gtin]">{{product.gt}}</a></td> 
 
     <td>{{product.name_e}}</td> 
 
     <td>{{product.name_z}}</td> 
 
     <td> 
 
     <a class="btn btn-primary" [routerLink]="['/app/master/productEdit', product.gt]"> 
 
           Edit 
 
          </a> 
 
     </td> 
 
    </tr> 
 
    <tr *ngIf="!products.length"> 
 
     <td>&nbsp;</td> 
 
     <td colspan="6">No Records Found</td> 
 
    </tr> 
 
    <tr *ngIf="(products | SearchPipe : searchText).length === 0"> 
 
     <td>&nbsp;</td> 
 
     <td colspan="6">No matches</td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot> 
 
    <tr> 
 
     <td colspan="12"> 
 
     <mfBootstrapPaginator [rowsOnPageSet]="[5, 10, 15]"></mfBootstrapPaginator> 
 
     </td> 
 
    </tr> 
 
    </tfoot> 
 
</table>

來源

2017-06-06 ZAJ

我認爲你需要改變你ngFor。在官方的例子，他們正在使用

<tr *ngFor="let item of mf.data">

但是你已經把ngFor不同的數據

<tr *ngFor="let product of products | SearchPipe : searchText">

對demo from documentation

來源

2017-06-06 06:16:29

感謝您的意見看看。但是當我添加該製造商時。在我的產品前面，然後我的數據沒有被裝入表格 – ZAJ

你是什麼意思「從我的產品」？你在控制檯有什麼錯誤？我認爲你需要明確地使用mf.data。不'mf.products' –

我沒有得到任何錯誤。在我的組件類中，我有從後端獲取的產品數據
'export class ProductComponent implements OnInit {
title：string; 產品：IProduct [] = []; getProducts（）{ console.log（'getProducts（）retrieve products'）; 。 this.productDataService.getProducts（）訂閱（（product_data：IProduct []）=> { this.products = product_data; }），（ERR：任何）=>的console.log（ERR），（） => console.log（'檢索產品'）; } – ZAJ

角度2分頁不起作用

回答

相關問題