ng-zorro-antd中踩过的坑

Posted 2020-11-24 keepsmart

ng-zorro-antd中踩过的坑

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

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

表格（table）

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

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

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

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

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

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

<nz-table [nzData]=“itemList”>
    <thead>
        <tr *ngFor=“let item of itemListHead”>
            <td>{{item.label}}</td>
        </tr>
    <tbody>
        <tr *ngFor=“let item of itemList”>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
    </tbody>
</nz-table>

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

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

看完本文，是不是有种豁然开朗的感觉呢？