Hovedproblemet i forbindelse med at bruge ngFor-direktivet med et indeks er, at det kan føre til uventede resultater, når de data, der gentages over ændringer. Dette skyldes, at indekset ikke automatisk opdateres, når elementer tilføjes eller fjernes fra arrayet, så hvis et nyt element tilføjes ved indeks 0, vil alle de andre elementer få deres indeks flyttet ned med ét. Dette kan føre til, at der vises forkerte data i din visning eller uventet adfærd i din applikation.
<ul>
<li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>
1. Denne kodelinje opretter en uordnet liste.
2. *ngFor-direktivet bruges til at sløjfe gennem elementarrayet og vise hvert element på listen.
3. Let nøgleordet bruges til at erklære en variabel kaldet "item", som holder det aktuelle element i løkkens iteration.
4. Let nøgleordet bruges også til at erklære en variabel kaldet "i", som holder indekset for det aktuelle element i løkkens iteration.
5. Denne linje viser hvert element på listen med dets indeksnummer (startende fra 0).
Hvad er Angular
Angular er et JavaScript-baseret open source-front-end-webapplikations-framework, der hovedsageligt vedligeholdes af Google og af et fællesskab af enkeltpersoner og virksomheder for at løse mange af de udfordringer, man støder på i udviklingen af enkeltside-applikationer. JavaScript-komponenterne supplerer Apache Cordova, en ramme, der bruges til at udvikle mobile apps på tværs af platforme. Det har til formål at forenkle både udviklingen og testningen af sådanne applikationer ved at levere en ramme for klientside model-view-controller (MVC) og model-view-viewmodel (MVVM) arkitekturer, sammen med komponenter, der almindeligvis bruges i rige internetapplikationer.
ngFor element
NgFor er et Angular strukturelt direktiv, der giver os mulighed for at sløjfe gennem data og skabe en skabelon for hvert element i et array eller objekt. Det bruges til at gentage et givet HTML-element et bestemt antal gange. NgFor kan bruges til at vise data fra et array, objekt eller streng. Det kan også bruges til at generere HTML-elementer baseret på værdierne af en matrix eller et objekt. NgFor bruges typisk i kombination med andre Angular-direktiver såsom ngIf og ngSwitch.
Sådan får du indeks af ngFor element
Du kan bruge nøgleordet index til at få indekset for et element i en ngFor-løkke. Syntaksen for dette er som følger:
I dette eksempel vil "i"-variablen indeholde det aktuelle indeks for sløjfen. Du kan derefter bruge denne variabel til at få adgang til eller ændre elementer på din liste.
