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://scjbc.cn/article/jhihgi.html
