Hovedproblemet knyttet til bruk av ngFor-direktivet med en indeks er at det kan føre til uventede resultater når dataene som itereres over endres. Dette er fordi indeksen ikke oppdateres automatisk når elementer legges til eller fjernes fra matrisen, så hvis et nytt element legges til ved indeks 0, vil alle de andre elementene få indeksene forskjøvet ned med én. Dette kan føre til at feil data vises i visningen eller uventet oppførsel i applikasjonen.
<ul>
<li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>
1. Denne kodelinjen lager en uordnet liste.
2. *ngFor-direktivet brukes til å gå gjennom elementarrayen og vise hvert element i listen.
3. Let nøkkelordet brukes til å deklarere en variabel kalt "item" som holder det gjeldende elementet i iterasjonen av loopen.
4. Let nøkkelordet brukes også til å deklarere en variabel kalt "i" som holder indeksen til gjeldende element i iterasjonen av loopen.
5. Denne linjen viser hvert element i listen med dets indeksnummer (fra 0).
Hva er Angular
Angular er et JavaScript-basert åpen kildekode-front-end-nettapplikasjonsrammeverk hovedsakelig vedlikeholdt av Google og av et fellesskap av enkeltpersoner og selskaper for å møte mange av utfordringene man møter ved å utvikle enkeltsideapplikasjoner. JavaScript-komponentene utfyller Apache Cordova, et rammeverk som brukes til å utvikle mobilapper på tvers av plattformer. Den tar sikte på å forenkle både utviklingen og testingen av slike applikasjoner ved å tilby et rammeverk for klientsidemodell-visning-kontroller (MVC) og modell-visning-visningsmodell (MVVM) arkitekturer, sammen med komponenter som vanligvis brukes i rike Internett-applikasjoner.
ngFor element
NgFor er et Angular strukturelt direktiv som lar oss gå gjennom data og lage en mal for hvert element i en matrise eller et objekt. Den brukes til å gjenta et gitt HTML-element et spesifisert antall ganger. NgFor kan brukes til å vise data fra en matrise, et objekt eller en streng. Den kan også brukes til å generere HTML-elementer basert på verdiene til en matrise eller et objekt. NgFor brukes vanligvis i kombinasjon med andre Angular-direktiver som ngIf og ngSwitch.
Hvordan få indeks av ngFor element
Du kan bruke nøkkelordet indeks for å få indeksen til et element i en ngFor-løkke. Syntaksen for dette er som følger:
I dette eksemplet vil "i"-variabelen inneholde gjeldende indeks for løkken. Du kan deretter bruke denne variabelen til å få tilgang til eller endre elementer i listen din.
