Angular 指令之 NgFor 教程

声明

NgFor 内建指令可以帮助开发者快速迭代某个数组来创建多个 DOM 元素。在

实际开发中,我发现全面掌握 NgFor 的用法可以很好地帮助我们应对更加复杂

的场景,甚至能实现性能的提升。此教程中涉及到了 Angular 变化检测机制的

内容,对于这一部分感兴趣的朋友可以参看我其他的博文

环境变量

和 NgIf 一样,NgFor 指令的常见用法是与 * 号符连用,然后由模板引擎对其进

行展开,开发者是没有感知的。略显特殊的是,NgFor 包含了一些内置环境变

量,可以在迭代的时候方便地选择迭代数组中首尾、奇偶等特殊位置。同时可

以自定义函数来判断数组是否发生了变化。

普通用法

迭代 items 数组。

索引位置

迭代 items 数组,并获取各个项的索引位置。

首尾位置

迭代 items 数组,并获取数组中首(first)尾(last)位置 。

奇偶位置

迭代 items 数组,并获取数组中奇(even)偶(odd)位置 。

自定义判定函数

NgFor 默认依据变化前后数组元素的引用是否发生变化,来判断数组本身是否

发生变化(增加、删除、重新排序),并对有变化的数据元素在页面上进行删

除或者新增。这在大部分场景下没有问题,但是有时候数组元素的引用发生了

改变并不意味着它的数据产生了变化。

如上所示, changeUsers 由某个事件触发,直接更改了 users 这个变量的引

用。默认策略下,由于 users 元素的引用因为赋值操作发生了变化, NgFor 指

令就会认为所有的元素都发生了变化,从而导致页面上的没有真正意义上变化

的数据也发生了重绘,进而降低了页面性能。

但是如 { id: 1} 这个对象,虽然它在赋值前后引用发生了改变,但 id 仍为1。在

此种场景下,我们希望能修改默认策略,不按照引用来判端一个元素是否发生

改变。还好 NgFor 中内建变量 trackBy 可以用来接收用户提供的一个自定义判

定函判定函数,来判定数组是否发生了变化。为了理解这个函数,我们需要看

看 ngFor 中的 ngDoCheck 函数。此钩子函数会在 ngFor 宿主组件变化检测发

生时调用。在 ngDoCheck 中,NgFor 会创建一个特殊的变化检测器,并传入

trackBy 来判断一个对象是否发生了改变,从而决定是否触发变化检测,更新

数据。

在这里我们自定义了 trackByFn 函数,当 user.id 发生变化的时,才会触发元

素重绘。在上面的场景下,原先的 user.id = 1 的元素不会发生重绘。

相关阅读

Angular 结构型指令原理

参考链接

NgForOf —— 官方文档

发表评论

电子邮件地址不会被公开。 必填项已用*标注