This project was generated with Angular CLI version 8.3.6.
The trackBy function takes the index and the current item as arguments and returns the unique identifier by which that item should be tracked
<ul>
- <li *ngFor="let todo of todos">{{todo.id}}</li>
+ <li *ngFor="let todo of todos; trackBy:trackElement ">{{todo.id}}</li>
</ul>
trackElement(index: number, element: any) {
return element ? element.id : null
}
Without trackBy | With trackBy |
---|---|
A structural directive that renders a template for each item in a collection. The directive is placed on an element, which becomes the parent of the cloned templates.
<ng-template ngFor [ngForOf]="data" [ngForTrackBy]="trackByIndex"
let-cell let-i="index" let-odd="odd">
{{i}}-{{cell.id}}/
</ng-template>
index: number
: The index of the current item in the iterable.first: boolean
: True when the item is the first item in the iterable.last: boolean
: True when the item is the last item in the iterable.even: boolean
: True when the item has an even index in the iterable.odd: boolean
: True when the item has an odd index in the iterable.
<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
{{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>