Išspręsta: html ngfor su indeksu

Pagrindinė problema, susijusi su ngFor direktyvos naudojimu su indeksu, yra ta, kad ji gali duoti netikėtų rezultatų, kai pasikeičia kartojami duomenys. Taip yra todėl, kad indeksas nėra automatiškai atnaujinamas, kai elementai pridedami arba pašalinami iš masyvo, todėl jei naujas elementas pridedamas prie 0 indekso, visų kitų elementų indeksai bus perkelti vienu žemyn. Dėl to jūsų rodinyje gali būti rodomi neteisingi duomenys arba programa gali veikti netikėtai.

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

1. Ši kodo eilutė sukuria netvarkingą sąrašą.
2. *ngFor direktyva naudojama norint peržiūrėti elementų masyvą ir parodyti kiekvieną sąrašo elementą.
3. Let raktažodis naudojamas deklaruoti kintamąjį, vadinamą "elementas", kuris turi dabartinį elementą ciklo iteracijoje.
4. Let raktažodis taip pat naudojamas deklaruoti kintamąjį, vadinamą "i", kuris turi esamo elemento indeksą ciklo iteracijoje.
5. Šioje eilutėje rodomas kiekvienas sąrašo elementas su jo indekso numeriu (pradedant nuo 0).

Kas yra kampinis

„Angular“ yra „JavaScript“ pagrindu sukurta atvirojo kodo priekinės žiniatinklio programos sistema, kurią daugiausia palaiko „Google“ ir asmenų bei korporacijų bendruomenė, kad būtų galima išspręsti daugelį iššūkių, su kuriais susiduriama kuriant vieno puslapio programas. „JavaScript“ komponentai papildo „Apache Cordova“, sistemą, naudojamą kuriant kelių platformų programas mobiliesiems. Juo siekiama supaprastinti tokių taikomųjų programų kūrimą ir testavimą, pateikiant kliento pusės modelio-vaizdo-valdiklio (MVC) ir modelio-vaizdo-vaizdo modelio (MVVM) architektūrų sistemą kartu su komponentais, paprastai naudojamais turtingose ​​interneto programose.

ngElementui

„NgFor“ yra kampinė struktūrinė direktyva, leidžianti peržiūrėti duomenis ir sukurti šabloną kiekvienam masyvo ar objekto elementui. Jis naudojamas tam tikrą HTML elementą pakartoti tam tikrą skaičių kartų. NgFor gali būti naudojamas duomenims iš masyvo, objekto ar eilutės rodyti. Jis taip pat gali būti naudojamas generuoti HTML elementus pagal masyvo ar objekto reikšmes. NgFor paprastai naudojamas kartu su kitomis Angular direktyvomis, tokiomis kaip ngIf ir ngSwitch.

Kaip gauti ngFor elemento indeksą

Norėdami gauti ngFor ciklo elemento indeksą, galite naudoti indekso raktinį žodį. Sintaksė yra tokia:

{{i}} – {{item}}

Šiame pavyzdyje kintamajame „i“ bus dabartinis ciklo indeksas. Tada galite naudoti šį kintamąjį norėdami pasiekti arba keisti sąrašo elementus.

Susijusios naujienos:

Palikite komentarą