DataTable disappear when I try to sort the DataTable

[BakrRagheb]

I have a problem with the functions related to DataTable. When Page load, the data is showing normally on the table, but it disappear once I press any function such as "sorting column head", "checkbox", "paging" or using "Search Text-box".

The problem exist only when I retrieve the data from back-end API, while all functions are working normally when I use the hard coded text in the ts file. in the two scenarios I place the code in ngOnInit{} and same HTML code.

I am using "light-bootstrap-dashboard-pro-angular-v1.3.0 " and below the Working Hard coded data and the code with the problem.

******************************* Declaration in both scenarios *****************************

declare interface DataTable { headerRow: string[]; footerRow: string[]; dataRows: string[][]; } public dataTable: DataTable;

********************************* Working - Hard Coded *****************************

ngOnInit{ this.dataTable = { headerRow: [ 'Name', 'Position', 'Office' ], footerRow: [ 'Name', 'Position', 'Office' ], dataRows: [ ['Airi Satou', 'Andrew Mike', 'Develop'], ['Angelica Ramos', 'John Doe', 'Design'], ['Ashton Cox', 'Alex Mike', 'Design', '2010'] ] }; } *********************** Problem - Retrieved from back-end ******************************** ngOnInit { this.astSrv.getAllAssets().subscribe((asts: AssetModel[]) => { this.dataTable.headerRow = []; this.dataTable.footerRow = []; this.dataTable.dataRows = [];

    this.dataTable.headerRow.push('Description', 'Company', 'Code' );
    this.dataTable.footerRow.push('Description', 'Company', 'Code' );
    asts.forEach (rw => {
            let astDescription: string = rw.astDescription.toString();
            let astCompany: string = rw.astCompany.toString();
            let astCode: string = rw.astCode.toString();
     this.dataTable.dataRows.push( [ astDescription ,  astCompany , astCode  ]);
    });

}); }