Angular2 datatableディレクティブの使用

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

あなたが直接、[製品]を超えるループしているので、あなたは、データを取得しています。 [products]を[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>