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

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

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

分类:

技术点:

相关文章: