Question

我正在尝试将https://github.com/mariuszfoltak/angular2-datatable/blob/master/README.md中的angular2-datatable实现到我的应用程序中。但由于某种原因，rowsOnPage没有采用我分配给它的数字。

例如当我说在页面上显示5条记录时，它会显示所有记录。我不知道自己错过了什么。有人可以帮我解决一下。

＆＃13;

<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>

＆＃13;

Answer 1

我认为你需要改变你ngFor。在他们正在使用的官方例子中

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

但是你已经输入了ngFor个不同的数据

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

查看demo from documentation

Answer 2

我回复晚了，但这是为了未来的读者。就我而言，由于为 [mfRowsOnPage] 指定值的方式错误，我遇到了同样的问题。

我指定值的方式

[mfRowsOnPage]="'5'"

指定值的正确方法

[mfRowsOnPage]="5"

Angular 2 Pagination无法正常工作

2 个答案: