Datatable doesn't get updated (doesn't show rows) after inserting new data into the rows array

I’m submitting a … (check one with “x”)

[#] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior

I’ve made a video of the problem, you can find it here: http://encircle360share.s3-eu-central-1.amazonaws.com/Screen-Recording-2017-02-04-11-23-11.mp4

Using external pagination the data on the next pages using paginations doesn’t get shown although it’s already there. Only after changing the page and changing back again to the page before shows the data (view gets updated). It’s also possible to scroll horizontally if the data is missing and the data will occur (view gets refreshed/updated). I think that might be a change detection problem.

Expected behavior Direct visibility of the rows/data after paginating.

Please tell us about your environment:

Mac OS X Sierra, IntelliJ IDEA

• Table version: 6.0.2 (current stable)

• Angular version: 2.4.4

• Browser: all; tested with: Firefox, Chrome, Safari, Opera

[ersatish]

I have also faced this issue and resolve it with the help of ng-If because. When you get the latest data from server set previous data set to null and in template as a-if to controll it.

[MorlaRamakrishna]

I have followed @amcdnl suggestion by setting a brand new array for [rows] even though facing the same issue.

my code is here:

setPage(selection:any){
        this.pageNum=selection.offset;
        this.reconcileService.query({
            page: selection.offset,
            size: selection.limit}).subscribe(
            (res: Response) =>{ 
                this.tableRows.splice(0,this.tableRows.length);
                console.log(this.tableRows);
                this.abc=res.json();
                this.abc.forEach(item=>{ 
                    this.tableRows.push(item);
                });
                this.totalRows=res.headers.get('X-Total-Count');
                console.log(res.headers.get('X-Total-Count'));
                console.log(this.tableRows);
            },
            (res: Response) =>{                 
                console.log(res.json());
            }
        );
    }