Angular中如何使用好NgForOf的trackBy
这篇文章主要介绍“Angular中如何使用好NgForOf的trackBy”,在日常操作中,相信很多人在Angular中如何使用好NgForOf的trackBy问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Angular中如何使用好NgForOf的trackBy”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
成都创新互联公司专业为企业提供牡丹江网站建设、牡丹江做网站、牡丹江网站设计、牡丹江网站制作等企业网站建设、网页设计与制作、牡丹江企业网站模板建站服务,10年牡丹江做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
要想自定义默认的跟踪算法,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”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
本文题目:Angular中如何使用好NgForOf的trackBy
当前地址:http://pwwzsj.com/article/jhihgi.html