ng-zorro-antd中踩过的坑
2024-10-08 04:44:26
ng-zorro-antd中踩过的坑
前端项目中,我们经常会使用阿里开源的组件库:ant-design,其提供的组件已经足以满足多数的需求,拿来就能直接用,十分方便,当然了,有些公司会对组件库进行二次封装,改造成极具自家风格的产品。
在本系列的文章中,不谈高大上的东西,不深究底层源码,只分享一些项目中遇到的小问题。
表格(table)
——师傅以为是组件库的bug,没想到……
不知道正在阅读本文的读者有没有经历过:
- 在使用
<nz-table></nz-table>
的时候,删除表格的最后一项时,展示“暂无数据”的图像,此后,再向表格中添加数据的时候,发现这个“暂无数据”的图像不消失了。 - 表格中展示了几条数据,但是批量删除了这些数据后(当然,也可以手动的一条一条删除),“暂无数据”的那张图并没有出现。
这个空状态怎么老和咱做对呢?就不能好好的满足我们的预期吗?别说,还真会,不过,偶然性极高。
- “暂无数据”图像在极少数的情况下会正常的显示(有多少呢?可能和再来一瓶的中奖率差不多吧)。
发生这种问题的原因实际上非常简单,回忆一下我们在删除和添加的表项时,是不是像下面这样做的:
<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];
}
这里提供的方法,简单,迅速,暴力,十分好用。
看完本文,是不是有种豁然开朗的感觉呢?
最新文章
- Linux学习之文件操作
- OncrickListener的实现
- 使用WKWebView替换UIWebView
- 似是而非的k=sqrt(n)
- IOS 在http请求中使用cookie
- gRPC Client的负载均衡器
- JFinal 部署在 Tomcat 下推荐方法(转)
- win8 64位操作系统 Microsoft Visual Studio 2010在IIS上调试 “此任务要求应用程序具有提升的权限”等问题
- ios8中百度推送接收不到
- 剑指offer 25 二叉树中和为某一值的路径
- ThreadPoolExecutor的运转机制
- K2开发中,遇到用户无权限OPEN当前的待办
- WebService关于Unable to find required classes (javax.activation.DataHandler and javax.mail.internet.MimeMultipart)问题解决
- 探究is与==的区别
- How to skip to next iteration in jQuery.each() util?
- SpringCloud | FeignClient和Ribbon重试机制区别与联系
- java的一些命名规范吧
- C#控制台程序,运行完窗口不退出的方法
- C++关键字之const(整理!)
- 20145328 《Java程序设计》第6周学习总结
热门文章
- 洛谷P2504 [HAOI2006]聪明的猴子
- tinyhttpd简介
- poj 3528 Ultimate Weapon (3D Convex Hull)
- [C#] ServiceStack.Redis如何批量的pop数据?
- Spring Boot 集成日志logback + 控制台打印SQL
- php三目运算计算三个数最大值最小值
- 最短路径Dijkstra算法和Floyd算法整理、
- tsung测试xmpp遇到no_free_userid
- H3C 传递信息
- js执行代码顺序