Det största problemet med att använda ngFor-direktivet med ett index är att det kan leda till oväntade resultat när data som itereras över ändras. Detta beror på att indexet inte uppdateras automatiskt när objekt läggs till eller tas bort från arrayen, så om ett nytt objekt läggs till vid index 0 kommer alla andra objekt att få sina index förskjutna med ett. Detta kan leda till att felaktig data visas i din vy eller oväntat beteende i din applikation.
<ul>
<li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>
1. Denna kodrad skapar en oordnad lista.
2. Direktivet *ngFor används för att gå igenom objektmatrisen och visa varje objekt i listan.
3. Nyckelordet let används för att deklarera en variabel som kallas "item" som håller det aktuella objektet i slingans iteration.
4. Nyckelordet let används också för att deklarera en variabel som heter "i" som håller indexet för det aktuella objektet i loopens iteration.
5. Den här raden visar varje objekt i listan med dess indexnummer (med början från 0).
Vad är Angular
Angular är ett JavaScript-baserat front-end-ramverk för webbapplikationer med öppen källkod som huvudsakligen underhålls av Google och av en grupp av individer och företag för att ta itu med många av de utmaningar som uppstår vid utveckling av ensidiga applikationer. JavaScript-komponenterna kompletterar Apache Cordova, ett ramverk som används för att utveckla plattformsoberoende mobilappar. Det syftar till att förenkla både utvecklingen och testningen av sådana applikationer genom att tillhandahålla ett ramverk för klientsidans modell-vy-kontroller (MVC) och modell-vy-vymodell (MVVM) arkitekturer, tillsammans med komponenter som vanligtvis används i rika Internet-applikationer.
ngFor element
NgFor är ett vinkelstrukturdirektiv som låter oss gå igenom data och skapa en mall för varje objekt i en array eller ett objekt. Den används för att upprepa ett givet HTML-element ett visst antal gånger. NgFor kan användas för att visa data från en array, ett objekt eller en sträng. Den kan också användas för att generera HTML-element baserat på värdena för en array eller ett objekt. NgFor används vanligtvis i kombination med andra Angular-direktiv som ngIf och ngSwitch.
Hur man får index av ngFor element
Du kan använda nyckelordet index för att få indexet för ett element i en ngFor-loop. Syntaxen för detta är följande:
I det här exemplet kommer variabeln "i" att innehålla det aktuella indexet för slingan. Du kan sedan använda denna variabel för att komma åt eller ändra element i din lista.
