Riješeno: html ngfor sa indeksom

Glavni problem vezan za korištenje ngFor direktive s indeksom je taj što može dovesti do neočekivanih rezultata kada se podaci iteriraju tokom promjene. To je zato što se indeks ne ažurira automatski kada se stavke dodaju ili uklone iz niza, tako da ako se nova stavka doda na indeks 0, indeksi svih ostalih stavki će biti pomaknuti za jedan naniže. To može dovesti do netočnih podataka koji se prikazuju u vašem prikazu ili neočekivanog ponašanja u vašoj aplikaciji.

<ul>
  <li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>

1. Ova linija koda stvara neuređenu listu.
2. Direktiva *ngFor se koristi za petlju kroz niz stavki i prikaz svake stavke na listi.
3. Let ključna riječ se koristi za deklariranje varijable koja se zove “item” koja drži trenutnu stavku u iteraciji petlje.
4. Let ključna riječ se također koristi za deklariranje varijable zvane “i” koja drži indeks trenutne stavke u iteraciji petlje.
5. Ovaj red prikazuje svaku stavku na listi sa njenim indeksnim brojem (počevši od 0).

Šta je Angular

Angular je open-source front-end okvir web aplikacija baziran na JavaScriptu koji uglavnom održava Google i zajednica pojedinaca i korporacija kako bi se riješili mnogi izazovi na koje se susreću u razvoju aplikacija na jednoj stranici. JavaScript komponente nadopunjuju Apache Cordova, okvir koji se koristi za razvoj mobilnih aplikacija na više platformi. Cilj mu je da pojednostavi i razvoj i testiranje takvih aplikacija pružanjem okvira za arhitekture model–pogled–kontrolor (MVC) i model–pogled–model prikaza (MVVM), zajedno sa komponentama koje se obično koriste u bogatim internet aplikacijama.

ngFor element

NgFor je strukturna direktiva Angular koja nam omogućava da prođemo kroz podatke i kreiramo predložak za svaku stavku u nizu ili objektu. Koristi se za ponavljanje datog HTML elementa određeni broj puta. NgFor se može koristiti za prikaz podataka iz niza, objekta ili stringa. Također se može koristiti za generiranje HTML elemenata na osnovu vrijednosti niza ili objekta. NgFor se obično koristi u kombinaciji sa drugim Angular direktivama kao što su ngIf i ngSwitch.

Kako dobiti indeks ngFor elementa

Možete koristiti ključnu riječ index da biste dobili indeks elementa u ngFor petlji. Sintaksa za ovo je sljedeća:

{{i}} – {{item}}

U ovom primjeru, varijabla “i” će sadržavati trenutni indeks petlje. Zatim možete koristiti ovu varijablu za pristup ili izmjenu elemenata na vašoj listi.

Slični postovi:

Ostavite komentar