angular中*ngfor中trackBy的用法

最新推荐文章于 2025-05-12 09:44:06 发布

转载最新推荐文章于 2025-05-12 09:44:06 发布 · 6.2k 阅读

angular 专栏收录该内容

6 篇文章

订阅专栏

本文介绍 Angular 中 ngFor 指令如何使用 trackBy 函数来提高列表渲染性能。默认情况下，Angular 使用对象身份进行跟踪，当对象引用改变时会触发更新。为避免不必要的 DOM 更新，可以通过提供自定义 trackBy 函数来比较对象的特定属性值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

On each ngDoCheck triggered for the ngForOf directive Angular checks what objects have changed. It uses differs for this process and each differ uses trackBy function to compare the current object with the new one. The default trackBy function tracks items by identity:

const trackByIdentity = (index: number, item: any) => item;

It receives the current item and should return some value. Then the value returned by the function is compared against the value this function returned the last time. If the value changes, the differ reports a change. So if the default function returns object references, it will not match the current item if the object reference has changed. So you can provide your custom trackBy function that will return something else. For example, some key value of the object. If this key value matches the previous one, then Angular will not detect the change.

The syntax ...trackBy:userByName is no longer supported. You must now provide a function reference. Here is the basic example:

setInterval( () => {
  this.list.length = 0;
  this.list.push({name: 'Gustavo'});
  this.list.push({name: 'Costa'});
}, 2000);

@Component({
  selector: 'my-app',
  template: `
   <li *ngFor="let item of list; trackBy:identify">{{item.name}}</li>
  `
})
export class App {
  list:[];

  identify(index, item){
     return item.name; 
  }

Although the object reference changes, the DOM is not updated. Here is the plunker. If you're curious how ngFor works under the hood, read this answer.