分享更有价值
被信任是一种快乐

Angular中如何使用好NgForOf的trackBy

文章页正文上

这篇文章主要介绍“Angular中如何使用好NgForOf的trackBy”,在日常操作中,相信很多人在Angular中如何使用好NgForOf的trackBy问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Angular中如何使用好NgForOf的trackBy”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
要想自定义默认的跟踪算法,NgForOf支持trackBy选项。trackBy接受一个带两个参数(index和item)的函数。 如果给出了trackBy,Angular 就会使用该函数的返回值来跟踪变化。
来个例子:
假设有这样的一个html
添加

*ngFor=”let i of arr; index as ii; trackBy: trackFunc”>
{{i.id}} / {{ i.name }}

2. 然后来点ts
arr = [
{ id: 1, name: ‘a’ },
{ id: 2, name: ‘b’ },
{ id: 3, name: ‘c’ },
{ id: 4, name: ‘e’ }
];
trackFunc = (index, item) => {
// 改变这里查看页面dom刷新状况
return index;
// return ‘xxx’;
// return item.id;
// return item.name;
};
add() {
const last = this.arr[this.arr.length – 1];
this.arr.unshift({
id: last.id, // 新加的元素id与开始定义的最后一个元素id相同,请注意!
name: Math.random().toString() // 新加的元素name是随机字符
});
}
3. 运行
以不停的往数组开始插入元素,查看页面刷新的情况。
(1)return index;
刷新全部li
(2)return item.id;
只会刷新id相同的li
(3)return item.name;
只会刷新name变化的li
(4)return ‘xxx’; 纯粹搞事情。。。
情况跟return index一样,刷新全部的li
通过以上的实践可知:
(1)return index: 数组索引变化触发刷新。
(2)return item.id: 最后个元素Id与新增的元素id相同,但也在刷新;但id为1,2,3的元素,从未刷新;再以追加的方式添加元素时,id为4的未在刷新。
(3)return item.name: name属性变化触发了刷新。
(4)return ‘xxx’: 返回与index和item都不相关的固定值,也会触发全部刷新。到此,关于“Angular中如何使用好NgForOf的trackBy”的学习就结束了免费云主机、域名,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注云技术网站,小编会继续努力为大家带来更多实用的文章!

相关推荐: CSS中div不占位的原因及解决方法是什么

本篇内容介绍了“CSS中div不占位的原因及解决方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 一、CSS盒模型在谈及div元素的占位问题之前,我们需…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册