Angular

angular/for-track-id

An @for block tracks a stable unique field of the item (track item.id), not the item object itself.

umiarkowanastatycznefe-angular

Dlaczego

track item compares items by object identity. Every time the list is replaced (a new HTTP response, an immutable update, a signal set), every object is new, so Angular destroys and recreates every row: focus and typed text in the rows are lost and the update is much slower than it needs to be.

Poprawka

Track a field that is unique and stable for the item, such as track item.id or track item.slug. track $index is acceptable only for a static list that never reorders and holds no state. A list of strings or numbers may track the value itself (track tag); the check leaves those alone.

Przykłady

<!-- bad -->
@for (user of users(); track user) { <app-user-row [user]="user" /> }
<!-- good -->
@for (user of users(); track user.id) { <app-user-row [user]="user" /> }

Źródła

Fakty

Identyfikator
angular/for-track-id
Waga
umiarkowana
Sprawdzanie
statyczne sprawdzane w kodzie źródłowym przez audit
Dotyczy plików
angular
Tylko w projektach z
angular
Uczy jej skill
fe-angular Angular components
Od wersji
0.1.0

Plik reguły na GitHubie

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain angular/for-track-id