Ng-zorro-antd: table not re-render when the table datasource changed

[jaune162]

Version

0.6.6

Environment

OS：macOS High Sierra 10.13.2;
Chrome 63.0.3239.84;
ng-zorro:0.6.6

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-setup-w626kg

Steps to reproduce

English is not my native language; please excuse typing errors.

1.Access to (https://ng-zorro-antd-setup-w626kg.stackblitz.io) open the app.
2.Open console on chrome.
3.Click '删除'.
4.Look console. The data is changed, but the table rows is not re-render.

1、访问(https://ng-zorro-antd-setup-w626kg.stackblitz.io)
2、打开浏览器的控制台
3、点击“删除”按钮
4、观察控制台日志，数据已经发生变化，但是表格没有重新渲染，表格中的数据还是删除之前的数据。

What is expected?

Delete table data use splice. the table rows re-render.
使用splice方法删除表格中的数据之后，表格重新渲染

What is actually happening?

Delete table data use splice. table data is change, but the table rows not re-render.
使用数组的splice方法删除数据之后，表格没有重新渲染

Other?

Change <tr nz-tbody-tr *ngFor="let data of nzTable.data; let idx = index"> to <tr nz-tbody-tr *ngFor="let data of rows; let idx = index">.
Then click 删除，table rows is re-render.

将<tr nz-tbody-tr *ngFor="let data of nzTable.data; let idx = index"> 改为 <tr nz-tbody-tr *ngFor="let data of rows; let idx = index">.之后
再点击“删除”表格中的数据已改变。

[vthinkxie]

@jaune162
https://stackblitz.com/edit/ng-zorro-antd-setup-qiedo3?file=app/app.component.ts
angular can not watch the mutation of the list, you should use immutable methods, just add

  deleteUser(idx) {
    this.rows.splice(idx, 1);
    this.rows = [...this.rows];
    console.log(this.rows);
  }

and everything will work fine.
you can read more info here https://angular.cn/guide/lifecycle-hooks#onchanges-%E9%92%A9%E5%AD%90

[jaune162]

@vthinkxie Thank you very much.

[jayjliang]

But when you are at page2, you delete data by

this.rows.splice(idx, 1);
this.rows = [...this.rows];

after render, it will come back to page1,
how to solve this problem?
or the table need some more input config?

[vthinkxie]

nzIsPageIndexReset

[v1ar31]

guys, this solution helped me

try this
this.cdr.detectChanges();

or this
setTimeout(() => this.cdr.detectChanges(), 1);