Kaip naudoti „ngFor Angular“ direktyvą

„Angular“ naudoja direktyvas, kad dinamiškai pateiktų tam tikrus HTML elementus jūsų svetainėje. Viena iš struktūrinių direktyvų, kurias galite naudoti, yra ngFor.

„ngFor“ direktyva leidžia pakartoti tą patį bloką tam tikrą skaičių kartų arba pereiti per objektų masyvą, kad būtų rodoma jų informacija. Tai galingas įrankis, kurį netgi galite naudoti norėdami pateikti objektus kituose objektuose.

Jis taip pat turi daug funkcijų, kurios gali būti naudingos tam tikrais atvejais. Tai apima pirmojo ir paskutinio elementų radimą arba tam tikrų elementų praleidimą.

Kaip naudoti ngFor statiniams skaičiams perjungti

„ngFor“ direktyva yra pagrįsta „for“ kilpa, viena iš daug naudingų kilpų, kurias palaiko „JavaScript“.. Nuo dabartinės Angular versijos (14) turėsite sukurti masyvą, kuriame būtų tiek elementų, kuriuos norite peržiūrėti.

1. Sąrašą galite sukurti pačiame ngFor teiginyje. Šis kodas pakartos pastraipą penkis kartus, naudojant indeksus nuo 0 iki 4:

   <div *ngFor='tegul [0, 1, 2, 3, 4]; tegul i = indeksas'>
   <p> Tai kartojama pastraipa: {{item}} </p>
   </div>

2. Kadangi aukščiau pateiktas metodas gali netikti dideliems masyvams, taip pat galite dinamiškai sukurti masyvą „TypeScript“ faile:

   eksportuoti klasėPavyzdysClasspadargaiOnInit{
    skaičiai: Masyvas<numerį> = [];
   konstruktorius() {
   // Tai dinamiškai sukurs šį masyvą:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   tai.skaičiai = Masyvas(10).fill(1).žemėlapis((x, i)=>i);
    }
   }

3. Tada galite peržiūrėti skaičių masyvą HTML:

   <div *ngFor='tegul numerių elementas; tegul i = indeksas'>
   <p>Tai kartojama pastraipa: {{item}}</p>
   </div>

Kaip praleisti arba sudaryti stilių tam tikrus skaičius

Galite naudoti nelyginis arba net ngKintamiesiems kas antram skaičiui nustatyti. Scenarijus, kai jums tai gali būti naudinga, yra tada, kai norite sukurti kiekvienos nelyginės ar lyginės lentelės eilutės stilių naudodami kitą spalvą.

1. Komponento CSS faile pridėkite keletą naujų CSS klasių. Tai yra stiliai, kuriuos naudosite tam tikriems elementams, esantiems lyginiuose arba nelyginiuose indeksuose:

   .raudona {
    spalva: raudona;
   }
   .mėlyna { 
    spalva: mėlyna; 
   }
   

2. Paskelbkite nelyginius ir lyginius kintamuosius sakinyje ngFor. Tai yra kintamieji, kuriuos „Angular“ atpažins. Priskirkite raudoną CSS klasę lyginiams skaičiams, o mėlyną CSS klasę nelyginiams skaičiams:

   <div *ngFor='tegul numerių elementas; tegul nelyginis = nelyginis; tegu lyginis = lyginis' [ngClass]="{raudona: lyginė, mėlyna: nelyginė}">
   <p> Tai kartojama pastraipa: {{item}} </p>
   </div>

3. Paleiskite savo Angular svetainę naudodami ng tarnauti ir atidarykite jį žiniatinklio naršyklėje. Lyginiai ir nelyginiai HTML elementai bus pakaitomis tarp skirtingų stilių, atsižvelgiant į jų CSS klasę:
4. Jei norite visiškai praleisti kiekvieną lyginį skaičių, galite naudoti direktyvą ngIf. Taip bus praleisti visi nelyginiai skaičiai ir bus rodomi tik lyginiai skaičiai:

   <div *ngFor='tegul numerių elementas; tegu lyginis = lyginis'>
   <p *ngIf='net'> Tai kartojama pastraipa: {{item}} </p>
   </div>

Kaip skaičiuoti atgal

Norėdami skaičiuoti atgal, galite naudoti tradicinius metodus, pvz., apversti sąrašą arba skaičiuoti atgal per kilpą naudodami indeksą.

1. Deklaruokite indekso kintamąjį sakinyje ngFor. „ngFor“ pradėkite nuo masyvo ilgio ir atimkite elementų, kuriuos jau peržiūrėjote, skaičių:

   <div *ngFor="tegul numerių elementas; tegul i = indeksas;">
   <p> Tai kartojama pastraipa: {{numbers.length-i-1}} </p>
   </div>

2. Taip pat galite sukurti atvirkštinį sąrašą „TypeScript“ faile:

   eksportuoti klasėPavyzdysClasspadargaiOnInit{
    skaičiai: Masyvas<numerį> = [];
    atvirkštinis sąrašas: masyvas<numerį> = [];
   konstruktorius() {
   tai.skaičiai = Masyvas(10).fill(1).žemėlapis((x, i)=>i);
   tai.reversedList = tai.numeriai.slice().reverse();
    }
   }

3. Pakartokite atvirkštinį sąrašą naudodami ngFor:

   <div *ngFor='let item of reversedList; tegul i = indeksas'>
   <p> Tai kartojama pastraipa: {{item}} </p>
   </div>

Kaip skirtingai stilizuoti pirmąjį ir paskutinįjį elementus

Pirmąjį ir paskutinįjį elementus galite stilizuoti atskirai nuo kitų elementų naudodami Pirmas ir paskutinis Kampiniai kintamieji. Tai yra alternatyva naudojant CSS psuedo klases Kaip :pirmas vaikas.

1. Teiginyje ngFor deklaruokite pirmąjį ir paskutinįjį kintamuosius. Naudokite ngClass direktyvą, kad priskirtumėte mėlyną ir raudoną CSS klases atlikdami ankstesnius veiksmus. Pirmajam elementui priskirkite mėlyną CSS klasę, o paskutiniam – raudoną CSS klasę:

   <div *ngFor='tegul numerių elementas; tegul pirmas = pirmas; tegu paskutinis = paskutinis' [ngClass]= "{mėlyna: pirma, raudona: paskutinė}">
   <p> Tai kartojama pastraipa: {{item}} </p>
   </div>

Kaip naudoti ngFor objektus kartoti

Galite naudoti ngFor direktyvą norėdami peržiūrėti objektus ir pasiekti atskirus jų kintamuosius.

1. Sukurkite objektų sąrašą „TypeScript“ faile. Tokiu atveju bus pateiktas žmonių sąrašas su informacija:

   eksportuoti klasėPavyzdysClasspadargaiOnInit{
    žmonės = []; 
   konstruktorius() {
   tai.people = [
    { Pirmas vardas: 'Jonas', pavardė: 'Kalvis', profesija: 'Žmogiškųjų išteklių vadybininkas', pradžios data: nauja data ("2019-02-05") },
    { Pirmas vardas: 'Marija', pavardė: 'Johnsonas', profesija: 'Techninis pareigūnas', pradžios data: nauja data ("2016-01-07") },
    { Pirmas vardas: 'Viljamas', pavardė: 'Ruda', profesija: 'HR pareigūnas', pradžios data: nauja data ("2018-03-03") },
    ];
    }
   }

2. HTML naudokite ngFor kilpą, kad peržiūrėtumėte žmonių sąrašą. Kiekvienas asmuo bus pasiekiamas naudojant asmuo kintamasis. Asmens kintamąjį galite naudoti norėdami pasiekti kiekvieno asmens atributus:

   <div *ngFor='tegul žmogus; tegul i = indeksas'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{asmuo.profesija}} </p>
   <p> {{person.startDate}} </p>
   </div>

Kaip naudoti įdėtą ngFor objektams rodyti kituose objektuose

Norėdami rodyti objektus kituose objektuose, galite naudoti įdėtą kilpą.

1. Pakeiskite žmonių sąrašą. Kiekvienas asmuo turės skubios pagalbos kontaktų sąrašą. Saugokite kiekvieną avarinį kontaktą kaip atskirą objektą:

   tai.people = [
    {
    Pirmas vardas: 'Jonas',
    pavardė: 'Kalvis',
    avariniai kontaktai: [
    { vardas: 'Amanda Smith', santykiai: 'Žmona', telefonas: '0441239876' },
    { vardas: 'Baris Smitas', santykiai: 'Sūnus', telefonas: '0442239876'}
    ]
    },
    {
    Pirmas vardas: 'Marija',
    pavardė: 'Johnsonas',
    avariniai kontaktai: [
    { vardas: 'Markas Johnsonas', santykiai: 'Vyras', telefonas: '0443239876' }
    ]
    },
    ];

2. HTML sukurkite įdėtą kilpą pradinio ciklo viduje, kad peržiūrėtumėte kiekvieną kritinės padėties kontaktą ir būtų rodoma jo informacija:

   <div *ngFor='tegul žmogus; tegul i = indeksas'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='leisti susisiekti su asmeniu.skubios pagalbosKontaktai; tegul j = indeksas'>
   <h5> Skubios pagalbos kontaktai: </h5>
   <p> {{Kontaktinis vardas}} </p>
   <p> {{person.relationship}} </p>
   <p> {{person.phone}} </p>
   </div>
   <br>
   </div>

Kilpos sukūrimas naudojant ngFor kampiniame režime

Galite naudoti struktūrinę direktyvą „ngFor“, kad dinamiškai peržiūrėtumėte HTML elementus savo svetainėje. Tai leis pakartoti tą patį bloką keliems objektams arba tam tikrą skaičių kartų.

Taip pat galite jį naudoti norėdami atlikti kitus triukus, pvz., praleisti kiekvieną lyginį ar nelyginį skaičių arba sukurti pirmojo ir paskutinio elemento stilių. Taip pat galite jį naudoti norėdami dinamiškai pateikti daug objektų kituose objektuose.

Yra ir kitų Angular direktyvų, kurias galite naudoti norėdami padaryti svetainę dinamiškesnę. Tai apima „ngIf“, „ngSwitch“, „ngStyle“, „ngClass“ ir „ngModel“.