Az ngFor direktíva indexszel való használatával kapcsolatos fő probléma az, hogy váratlan eredményekhez vezethet, amikor az ismétlődő adatok megváltoznak. Ennek az az oka, hogy az index nem frissül automatikusan, amikor elemeket adnak hozzá vagy eltávolítanak a tömbből, így ha új elemet adnak hozzá a 0 indexhez, az összes többi elem indexe eggyel lejjebb kerül. Ez helytelen adatok megjelenítéséhez vezethet a nézetben, vagy váratlan viselkedéshez vezethet az alkalmazásban.
<ul>
<li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>
1. Ez a kódsor rendezetlen listát hoz létre.
2. Az *ngFor direktíva az itemtömbön való áthurkolásra és a lista minden elemének megjelenítésére szolgál.
3. A let kulcsszó egy „item” nevű változó deklarálására szolgál, amely az aktuális elemet tartalmazza a ciklus iterációjában.
4. A let kulcsszót egy „i” nevű változó deklarálására is használják, amely az aktuális elem indexét tartalmazza a ciklus iterációjában.
5. Ebben a sorban a lista minden eleme az indexszámával (0-tól kezdődően) jelenik meg.
Mi az Angular
Az Angular egy JavaScript-alapú, nyílt forráskódú front-end webalkalmazás-keretrendszer, amelyet főként a Google, valamint magánszemélyek és vállalatok közössége tart fenn, hogy megbirkózzon az egyoldalas alkalmazások fejlesztése során felmerülő számos kihívással. A JavaScript összetevői kiegészítik az Apache Cordova keretrendszert, amelyet többplatformos mobilalkalmazások fejlesztésére használnak. Célja, hogy leegyszerűsítse az ilyen alkalmazások fejlesztését és tesztelését azáltal, hogy keretet biztosít a kliensoldali modell-nézet-vezérlő (MVC) és modell-nézet-nézetmodell (MVVM) architektúrákhoz, valamint a gazdag internetes alkalmazásokban általánosan használt összetevőkhöz.
ngAz elemhez
Az NgFor egy Angular szerkezeti direktíva, amely lehetővé teszi számunkra, hogy az adatok között hurkoljunk, és egy sablont hozzunk létre egy tömb vagy objektum minden eleméhez. Egy adott HTML-elem meghatározott számú ismétlésére szolgál. Az NgFor használható tömbből, objektumból vagy karakterláncból származó adatok megjelenítésére. Használható HTML elemek generálására is egy tömb vagy objektum értékei alapján. Az NgFor-t általában más Angular direktívákkal, például az ngIf-el és az ngSwitch-el együtt használják.
Hogyan szerezhető be az ngFor elem indexe
Használhatja az index kulcsszót egy ngFor ciklusban lévő elem indexének lekéréséhez. Ennek szintaxisa a következő:
Ebben a példában az „i” változó tartalmazza a ciklus aktuális indexét. Ezt a változót ezután a lista elemeinek eléréséhez vagy módosításához használhatja.
