Lahendatud: html ngfor koos indeksiga

Peamine probleem, mis on seotud direktiivi ngFor kasutamisega koos indeksiga, on see, et see võib anda ootamatuid tulemusi, kui korduvad andmed muutuvad. Selle põhjuseks on asjaolu, et üksuste massiivi lisamisel või eemaldamisel indeksit automaatselt ei värskendata, nii et kui uus üksus lisatakse indeksisse 0, nihutatakse kõigi teiste üksuste indekseid ühe võrra allapoole. See võib põhjustada teie vaates valede andmete kuvamise või ootamatu käitumise teie rakenduses.

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

1. See koodirida loob järjestamata loendi.
2. Direktiiv *ngFor kasutatakse üksuste massiivi läbimiseks ja loendi iga üksuse kuvamiseks.
3. Märksõna let kasutatakse muutuja nimega “item” deklareerimiseks, mis hoiab tsükli iteratsioonis praegust üksust.
4. Märksõna let kasutatakse ka muutuja "i" deklareerimiseks, mis hoiab tsükli iteratsioonis praeguse üksuse indeksit.
5. Sellel real kuvatakse iga loendi üksus koos selle indeksinumbriga (alates 0-st).

Mis on Angular

Angular on JavaScriptil põhinev avatud lähtekoodiga esiotsa veebirakenduste raamistik, mida haldavad peamiselt Google ning üksikisikute ja ettevõtete kogukond, et lahendada paljusid üheleheliste rakenduste arendamisel tekkinud väljakutseid. JavaScripti komponendid täiendavad Apache Cordovat, platvormiüleste mobiilirakenduste arendamiseks kasutatavat raamistikku. Selle eesmärk on lihtsustada nii selliste rakenduste arendamist ja testimist, pakkudes raamistikku kliendipoolsetele mudeli-vaate-kontrolleri (MVC) ja mudeli-vaate-vaatemudeli (MVVM) arhitektuuridele koos komponentidega, mida tavaliselt kasutatakse rikkalikes Interneti-rakendustes.

ngElemendi jaoks

NgFor on Angular struktuuridirektiiv, mis võimaldab meil andmeid sirvida ja luua iga massiivi või objekti üksuse jaoks malli. Seda kasutatakse antud HTML-i elemendi kordamiseks määratud arv kordi. NgFori saab kasutada massiivi, objekti või stringi andmete kuvamiseks. Seda saab kasutada ka massiivi või objekti väärtuste põhjal HTML-elementide genereerimiseks. NgFori kasutatakse tavaliselt koos teiste Angular direktiividega, nagu ngIf ja ngSwitch.

Kuidas saada ngFori elemendi indeksit

Indeksi märksõna abil saate ngFori tsükli elemendi indeksi hankida. Selle süntaks on järgmine:

{{i}} – {{item}}

Selles näites sisaldab muutuja "i" tsükli praegust indeksit. Seejärel saate seda muutujat kasutada oma loendi elementidele juurdepääsuks või nende muutmiseks.

Seonduvad postitused:

Jäta kommentaar