Question

我从一个休息服务获得响应为大小为9的数组，以及我分配给angular2-datatable [mfData]属性的响应。在按钮单击我打开一个模态和内部，我正在显示此数据表，但分页来自记录大小但数据未来或在数据表中呈现。在检查页面时显示模板绑定= {＆＃34; ng-reflect-ng-for-of＆＃34;：null}

Component

this.requestFormService.getFlights(this.flightRequest).then(response => {
     console.log(response);
     this.flightList = response;
     this.childModal.show();
}

html

<div class="modal-body">

                <table class="table table-striped" [mfData]="flightList"
                    #mf="mfDataTable" [mfRowsOnPage]="5">
                    <thead>
                        <tr>
                            <th class="datatable-header"><mfDefaultSorter
                                    by="flightCode">Flight No</mfDefaultSorter></th>
                            <th class="datatable-header"><mfDefaultSorter
                                    by="departureStation">From</mfDefaultSorter></th>
                            <th class="datatable-header"><mfDefaultSorter
                                    by="arrivalStation">To</mfDefaultSorter></th>
                            <th class="datatable-header"><mfDefaultSorter
                                    by="scheduledDepartureTime">Departure Time</mfDefaultSorter></th>
                            <th class="datatable-header"><mfDefaultSorter
                                    by="scheduledArrivalTime">Arrival Time</mfDefaultSorter></th>
                            <th class="datatable-header"><mfDefaultSorter
                                    by="via">Via</mfDefaultSorter></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of mf.data;let j = index"
                            (mouseover)="setMouseOveredRow(j)"
                            [class.active]="j == selectedRow"
                            (click)="setSelectedFlight(item)">
                            <td>{{item[0]}}</td>
                            <td>{{item[1]}}</td>
                            <td>{{item[2]}}</td>
                            <td>{{item[3]}}</td>
                            <td>{{item[4]}}</td>
                            <td>{{item[5]}}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            `enter code here`<td colspan="6"><mfBootstrapPaginator
                                    [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

Answer 1

问题来自我身边并已解决。实际上，我在该页面中使用了 2 个数据表。事情是两个数据表模板变量是相同的（#mf），现在我更改了第二个数据表并且它工作正常。

即使分页适用于数据表，但angular2-datatable不显示数据

1 个答案: