Suurin ongelma ngFor-direktiivin käyttämiseen indeksin kanssa on, että se voi johtaa odottamattomiin tuloksiin, kun iteroitava data muuttuu. Tämä johtuu siitä, että hakemistoa ei päivitetä automaattisesti, kun kohteita lisätään tai poistetaan taulukosta, joten jos uusi alkio lisätään indeksiin 0, kaikkien muiden kohteiden indeksit siirtyvät yhdellä alaspäin. Tämä voi johtaa virheellisten tietojen näyttämiseen näkymässäsi tai odottamattomaan toimintaan sovelluksessasi.
<ul>
<li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>
1. Tämä koodirivi luo järjestämättömän luettelon.
2. *ngFor-direktiiviä käytetään alkiotaulukon läpikäymiseen ja luettelon jokaisen kohteen näyttämiseen.
3. Let-avainsanaa käytetään ilmoittamaan muuttuja nimeltä "item", joka pitää nykyisen kohteen silmukan iteraatiossa.
4. Let-avainsanaa käytetään myös ilmoittamaan muuttuja nimeltä "i", joka pitää silmukan iteraatiossa nykyisen kohteen indeksin.
5. Tällä rivillä näkyy jokainen luettelon kohde indeksinumeroineen (alkaen 0:sta).
Mikä on Angular
Angular on JavaScript-pohjainen avoimen lähdekoodin käyttöliittymän verkkosovelluskehys, jota pääasiassa ylläpitävät Google sekä yksityishenkilöiden ja yritysten yhteisö. Se vastaa moniin haasteisiin, joita yksisivuisten sovellusten kehittämisessä on kohdattu. JavaScript-komponentit täydentävät Apache Cordovaa, kehystä, jota käytetään monikäyttöisten mobiilisovellusten kehittämiseen. Sen tavoitteena on yksinkertaistaa tällaisten sovellusten kehitystä ja testausta tarjoamalla puitteet asiakaspuolen malli-näkymä-ohjain (MVC) ja malli-näkymä-näkymämalli (MVVM) -arkkitehtuureille sekä monissa Internet-sovelluksissa yleisesti käytettyjen komponenttien kanssa.
ngElementille
NgFor on Angular-rakennedirektiivi, jonka avulla voimme selata tietoja ja luoda mallin jokaiselle taulukon tai objektin kohteelle. Sitä käytetään toistamaan tietty HTML-elementti tietyn määrän kertoja. NgFor:ia voidaan käyttää tietojen näyttämiseen taulukosta, objektista tai merkkijonosta. Sitä voidaan käyttää myös HTML-elementtien luomiseen taulukon tai objektin arvojen perusteella. NgForia käytetään tyypillisesti yhdessä muiden Angular-direktiivien, kuten ngIf ja ngSwitch, kanssa.
Kuinka saada ngFor-elementin indeksi
Voit käyttää indeksiavainsanaa saadaksesi ngFor-silmukan elementin indeksin. Tämän syntaksi on seuraava:
Tässä esimerkissä "i"-muuttuja sisältää silmukan nykyisen indeksin. Tämän muuttujan avulla voit sitten käyttää tai muokata luettelosi elementtejä.
