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  ]);
    });

});
}