Angular uses trackBy to Improve the Performance, angulartrackby

Angular uses trackBy to Improve the Performance, angulartrackby

When traversing a collection in an Angular template, you will write as follows:

<ul> <li *ngFor="let item of collection">{{item.id}}</li></ul>

Sometimes you need to change this set, for example, returning new data from the backend interface. Angular does not know how to track the items in the set, but does not know which items should be added, modified, and deleted. The result is that Angular removes all items in the set and adds them again. Like this:

The disadvantage of doing so is that a large number of DOM operations will be performed, and DOM operations will consume a lot of performance.

The solution is to add a trackBy function for * ngFor to tell Angular how to track items in the set. The trackBy function requires two parameters: the first is the index of the current item, the second is the current item, and a unique identifier is returned, just like this:

import{ Component } from '@angular/core';@Component({ selector: 'trackBy-test', template: ` <ul><li *ngFor="let item of items; trackBy: trackByIndex">{{item.name}}</li></ul> <button (click)="getItems()">Get Items</button> `})export class TrackByCmp{ items: any[]=[]; constructor(){  this.items = [{name:'Tom'},{name:'Jerry'},{name:'Kitty'}]; } getItems(){  this.items = [{name:'Tom'},{name:'Jerry'},{name:'Mac'},{name:'John'}]; } trackByIndex(index, item){  return index; }}

After doing so, Angular will know which changes:

We can see that DOM only redraws the modified and added items. In addition, clicking the button again will not redraw. However, when the trackBy function is not added, clicking the button repeatedly triggers re-painting (you can look back at the first GIF ).

The above section describes how Angular uses trackBy to improve performance. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!