ng-zorro-antd中nz-table的问题

前端项目中，我们经常会使用阿里开源的组件库：ant-design，其提供的组件已经足以满足多数的需求，拿来就能直接用，十分方便，当然了，有些公司会对组件库进行二次封装，改造成极具自家风格的产品。

在本系列的文章中，不谈高大上的东西，不深究底层源码，只分享一些项目中遇到的小问题。

表格（table）

——

以为是组件库的bug，没想到……

不知道正在阅读本文的读者有没有经历过：

1. 在使用 的时候，删除表格的最后一项时，展示“暂无数据”的图像，此后，再向表格中添加数据的时候，发现这个“暂无数据”的图像不消失了。
2. 表格中展示了几条数据，但是批量删除了这些数据后（当然，也可以手动的一条一条删除），“暂无数据”的那张图并没有出现。

这个空状态怎么老和咱做对呢？就不能好好的满足我们的预期吗？别说，还真会，不过，偶然性极高。

1. “暂无数据”图像在极少数的情况下会正常的显示（有多少呢？可能和再来一瓶的中奖率差不多吧）。 

发生这种问题的原因实际上非常简单，回忆一下我们在删除和添加的表项时，是不是像下面这样做的：

{{item.label}}{{item.name}}{{item.age}}
 

public itemList: any[] = [];
 public itemListHead = [{ label: ‘name’ },{ label: ‘age’ }
 ];
 add(item: any) {this.itemList.push(item);
 }delete(index) {this.itemList.splice(index, 1);
 }

看起来，这段代码并没有什么问题，但是要知道一个问题，push()和 splice()这俩函数是直接在原始数组上进行操作的，会改变原数组，但是……想一想，他会改变数组的引用吗？不会。

而在angular的设计中，onChanges()监听的是什么变化呢？是引用。

所以，只要想办法改变引用地址就可以解决上面的问题。

add(item: any) {this.itemList.push(item);this.itemList = [...this.itemList];
 }delete(index) {this.itemList.splice(index, 1);this.itemList = [...this.itemList];
 }

 这里提供的方法，简单，迅速，暴力，十分好用。

表格下面会多出一行暂无数据这样的图表
想把它去掉的话只需要加上 [nzData]="[{}]",让nzData属性为空就可以