使用Angular2数据词指令

Question

我正在使用项目中的angular2 dataTable来显示带有标志的表。

这是图书馆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]，然后数据将使用DataTable组件获取。

那么您将能够获得所有优势，例如分类和分页。

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