当数据附加到现有数组时,*ngFor 如何在 Angular 中工作?
How does *ngFor work in Angular when data is appended to existing array?
我有一个数组 dataArray
,它有 100 个项目。我最初使用 ngFor 显示 100 个复选框。有一个按钮可以加载下 100 个项目。单击此按钮后,我将向 dataArray
添加 100 个以上的项目,这样 dataArray
将有 200 个项目。我的问题是,Angular 运行 ngFor 是否再次循环以构建第二组项目(也包括第 100 个项目),或者它是否足够聪明以仅循环第二组项目(仅 100 个)和将它们附加到现有的 DOM?
当您追加项目时,整个 for 循环必须重新 - 运行。
避免这种情况的方法是提供一个 trackBy
函数。 trackBy
函数告诉 angular 只有当指定的属性(例如 id)更改时,项目才会更改。这允许 angular 仅更改指定属性已更改的 DOM 个节点。
更多信息:
我有一个数组 dataArray
,它有 100 个项目。我最初使用 ngFor 显示 100 个复选框。有一个按钮可以加载下 100 个项目。单击此按钮后,我将向 dataArray
添加 100 个以上的项目,这样 dataArray
将有 200 个项目。我的问题是,Angular 运行 ngFor 是否再次循环以构建第二组项目(也包括第 100 个项目),或者它是否足够聪明以仅循环第二组项目(仅 100 个)和将它们附加到现有的 DOM?
当您追加项目时,整个 for 循环必须重新 - 运行。
避免这种情况的方法是提供一个 trackBy
函数。 trackBy
函数告诉 angular 只有当指定的属性(例如 id)更改时,项目才会更改。这允许 angular 仅更改指定属性已更改的 DOM 个节点。
更多信息: