Hlavným problémom súvisiacim s používaním direktívy ngFor s indexom je to, že môže viesť k neočakávaným výsledkom, keď sa údaje iterujú pri zmenách. Je to preto, že index nie je automaticky aktualizovaný, keď sú položky pridávané alebo odstraňované z poľa, takže ak sa nová položka pridá na indexe 0, všetky ostatné položky budú mať svoje indexy posunuté nadol o jednu. To môže viesť k zobrazeniu nesprávnych údajov vo vašom zobrazení alebo neočakávanému správaniu vo vašej aplikácii.
<ul>
<li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>
1. Tento riadok kódu vytvára neusporiadaný zoznam.
2. Direktíva *ngFor sa používa na zacyklenie cez pole položiek a zobrazenie každej položky v zozname.
3. Kľúčové slovo let sa používa na deklarovanie premennej s názvom „item“, ktorá obsahuje aktuálnu položku v iterácii cyklu.
4. Kľúčové slovo let sa tiež používa na deklarovanie premennej s názvom „i“, ktorá obsahuje index aktuálnej položky v iterácii cyklu.
5. Tento riadok zobrazuje každú položku v zozname s jej indexovým číslom (začínajúc od 0).
Čo je Angular
Angular je open-source front-endový webový aplikačný rámec založený na JavaScripte, ktorý spravuje hlavne Google a komunita jednotlivcov a korporácií, aby riešil mnohé z výziev, s ktorými sa stretávame pri vývoji jednostránkových aplikácií. Komponenty JavaScript dopĺňajú Apache Cordova, rámec používaný na vývoj mobilných aplikácií pre rôzne platformy. Jeho cieľom je zjednodušiť vývoj aj testovanie takýchto aplikácií poskytnutím rámca pre architektúry model-view-controller (MVC) a model-view-viewmodel (MVVM) na strane klienta, spolu s komponentmi bežne používanými v bohatých internetových aplikáciách.
ngFor element
NgFor je štrukturálna smernica Angular, ktorá nám umožňuje prechádzať dátami a vytvárať šablónu pre každú položku v poli alebo objekte. Používa sa na opakovanie daného prvku HTML určený počet krát. NgFor možno použiť na zobrazenie údajov z poľa, objektu alebo reťazca. Môže sa tiež použiť na generovanie prvkov HTML na základe hodnôt poľa alebo objektu. NgFor sa zvyčajne používa v kombinácii s inými direktívami Angular, ako sú ngIf a ngSwitch.
Ako získať index prvku ngFor
Na získanie indexu prvku v slučke ngFor môžete použiť kľúčové slovo index. Syntax pre toto je nasledovná:
V tomto príklade bude premenná „i“ obsahovať aktuálny index cyklu. Túto premennú potom môžete použiť na prístup alebo úpravu prvkov vo vašom zozname.
