使用Angular2數據表指令

Question

我在項目中使用Angular2數據表來顯示具有分頁表格。

這裏是鏈接到庫https://github.com/mariuszfoltak/angular2-datatable。

有人可以請我清除一些疑問#mf="mfDataTable"？開發人員已在他的演示中使用過，並使用mf.data來引用數據。但是，當我使用該製造商時，我的表格沒有填充，但是當我沒有使用.mf時使用它時，我的數據將加載到表格中。

那麼，我需要那#mf="mfDataTable"或我錯過了什麼？

以下是我的代碼。

歡呼聲！

<table class="table table-striped table-hover" [mfData]="products" #mf="mfDataTable" [mfRowsOnPage]="5"> 
 
       <thead> 
 
        <tr> 
 
         <th> 
 
          <mfDefaultSorter by="gtin">GTIN</mfDefaultSorter> 
 
         </th> 
 
         <th> 
 
          <mfDefaultSorter by="fdoname_en">Name Eng</mfDefaultSorter> 
 
         </th> 
 
         <th class="no-sort hidden-sm-down"> 
 
          <mfDefaultSorter by="fdoname_fa">Name Per</mfDefaultSorter> 
 
         </th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr *ngFor="let product of products | SearchPipe : searchText"> 
 
         <td><a [routerLink]="['/app/master/products',product.gtin]">{{product.gtin}}</a></td> 
 
         <td>{{product.fdoname_en}}</td> 
 
         <td>{{product.fdoname_fa}}</td> 
 
         <td> 
 
          <a class="btn btn-primary" [routerLink]="['/app/master/productEdit', product.gtin]"> 
 
           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, 25]"></mfBootstrapPaginator> 
 
         </td> 
 
        </tr> 
 
       </tfoot> 
 
      </table>

Answer 1

你得到的數據，因爲你是直接遍歷[產品]。將[產品]更改爲[mf.data]，然後使用數據表組件獲取數據。

然後，您將能夠獲得排序和分頁等所有優點。

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