Rešeno: html ngfor z indeksom

Glavna težava, povezana z uporabo direktive ngFor z indeksom, je, da lahko povzroči nepričakovane rezultate, ko se podatki, ki se ponavljajo, spremenijo. To je zato, ker se indeks ne posodobi samodejno, ko so elementi dodani ali odstranjeni iz matrike, tako da če je nov element dodan pri indeksu 0, se bodo indeksi vseh drugih elementov pomaknili navzdol za eno. To lahko povzroči nepravilne podatke, prikazane v vašem pogledu, ali nepričakovano vedenje v vaši aplikaciji.

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

1. Ta vrstica kode ustvari neurejen seznam.
2. Direktiva *ngFor se uporablja za kroženje po nizu elementov in prikaz vsakega elementa na seznamu.
3. Ključna beseda let se uporablja za deklaracijo spremenljivke, imenovane "item", ki hrani trenutni element v ponovitvi zanke.
4. Ključna beseda let se uporablja tudi za deklaracijo spremenljivke, imenovane "i", ki vsebuje indeks trenutnega elementa v ponovitvi zanke.
5. Ta vrstica prikazuje vsako postavko na seznamu z njeno indeksno številko (začenši z 0).

Kaj je Angular

Angular je odprtokodno ogrodje sprednje spletne aplikacije, ki temelji na JavaScriptu in ga v glavnem vzdržujejo Google ter skupnost posameznikov in korporacij za reševanje številnih izzivov, s katerimi se srečujejo pri razvoju enostranskih aplikacij. Komponente JavaScript dopolnjujejo Apache Cordova, okvir, ki se uporablja za razvoj mobilnih aplikacij za več platform. Njegov namen je poenostaviti razvoj in testiranje takšnih aplikacij z zagotavljanjem ogrodja za arhitekturo model–pogled–krmilnik (MVC) in model–pogled–model (MVVM) na strani odjemalca, skupaj s komponentami, ki se običajno uporabljajo v bogatih internetnih aplikacijah.

ngZa element

NgFor je strukturna direktiva Angular, ki nam omogoča kroženje po podatkih in ustvarjanje predloge za vsak element v nizu ali objektu. Uporablja se za ponavljanje določenega elementa HTML določeno število krat. NgFor se lahko uporablja za prikaz podatkov iz matrike, predmeta ali niza. Uporablja se lahko tudi za ustvarjanje elementov HTML na podlagi vrednosti matrike ali predmeta. NgFor se običajno uporablja v kombinaciji z drugimi direktivami Angular, kot sta ngIf in ngSwitch.

Kako pridobiti indeks elementa ngFor

Za pridobitev indeksa elementa v zanki ngFor lahko uporabite ključno besedo index. Sintaksa za to je naslednja:

{{i}} – {{item}}

V tem primeru bo spremenljivka "i" vsebovala trenutni indeks zanke. Nato lahko to spremenljivko uporabite za dostop do ali spreminjanje elementov na vašem seznamu.

Podobni objav:

Pustite komentar