even though pagination works for the datatable but angular2-datatable not displaying data

Question

I am getting the response as an array of size 9 from one rest service, and that response I am assigning to angular2-datatable [mfData] property. On button click I am opening one modal and inside that I am displaying this datatable, but pagination comes as per the records size but data is not coming or rendering in datatable. While inspecting page it shows template bindings={ "ng-reflect-ng-for-of": 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

Issue hase been from myside and solved. Actually 2 data tables I am using in that page. And the thing was for both data table template variable was same(#mf), now I changed for the second data table and it is working fine.