Kako uporabljati kotno direktivo ngFor

Angular uporablja direktive za dinamično upodabljanje določenih elementov HTML na vašem spletnem mestu. Ena od strukturnih direktiv, ki jo lahko uporabite, je ngFor.

Direktiva ngFor vam omogoča, da isti blok ponovite določeno število krat ali zanko skozi niz predmetov, da prikažete njihove podrobnosti. To je močno orodje, ki ga lahko uporabite celo za upodabljanje predmetov znotraj drugih predmetov.

Ima tudi številne funkcije, ki so lahko uporabne v določenih scenarijih. To vključuje iskanje prvega in zadnjega elementa ali preskakovanje določenih elementov.

Kako uporabljati ngFor za zanko skozi statična števila

Direktiva ngFor temelji na zanki for, eni izmed veliko uporabnih zank, ki jih podpira JavaScript. Od trenutne različice Angulara (14) boste morali ustvariti matriko, ki vsebuje število elementov, po katerih želite zankati.

1. Seznam lahko ustvarite v samem stavku ngFor. Naslednja koda bo petkrat ponovila odstavek z uporabo indeksov od 0 do 4:

   <div *ngFor='naj postavka [0, 1, 2, 3, 4]; naj bo i = indeks'>
   <str> To je ponovljen odstavek: {{item}} </str>
   </div>

2. Ker zgornja metoda morda ni primerna za velike matrike, lahko tudi dinamično ustvarite matriko v datoteki TypeScript:

   izvoz razredPrimerClassorodjaOnInit{
    številke: niz<številko> = [];
   konstruktor() {
   // To bo dinamično ustvarilo naslednjo matriko:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   to.številke = Niz(10).fill(1).map((x, i)=>i);
    }
   }

3. Nato se lahko pomikate po nizu številk v HTML-ju:

   <div *ngFor='naj postavka številk; naj bo i = indeks'>
   <str>To je ponovljen odstavek: {{item}}</str>
   </div>

Kako preskočiti ali oblikovati določene številke

Lahko uporabite Čuden oz celo ngZa spremenljivke za določanje vsakega drugega števila. Scenarij, pri katerem se vam bo to morda zdelo koristno, je, če želite vsako liho ali sodo vrstico v tabeli oblikovati z drugo barvo.

1. V datoteko CSS za komponento dodajte nekaj novih razredov CSS. To so slogi, ki jih boste uporabili za določene elemente pri sodih ali lihih indeksih:

   .rdeča {
    barva: rdeča;
   }
   .modra { 
    barva: modra; 
   }
   

2. V stavku ngFor navedite lihe in sode spremenljivke. To so spremenljivke, ki jih bo Angular prepoznal. Dodelite rdeči razred CSS sodim številkam in modri razred CSS lihim številkam:

   <div *ngFor='naj postavka številk; pustimo odd = liho; naj celo = celo' [ngClass]="{rdeča: sodo, modra: liho}">
   <str> To je ponovljen odstavek: {{item}} </str>
   </div>

3. Zaženite svoje spletno mesto Angular z uporabo ng služijo in jo odprite v spletnem brskalniku. Sodi in lihi elementi HTML se bodo izmenjevali med različnimi slogi glede na njihov razred CSS:
4. Če želite v celoti preskočiti vsako sodo število, lahko uporabite direktivo ngIf. To bo preskočilo vse lihe številke in prikazalo samo sode številke:

   <div *ngFor='naj postavka številk; naj celo = celo'>
   <p *ngIf='celo'> To je ponovljen odstavek: {{item}} </str>
   </div>

Kako šteti nazaj

Za štetje nazaj lahko uporabite tradicionalne metode, kot je obračanje seznama ali štetje nazaj skozi zanko z uporabo indeksa.

1. Deklarirajte indeksno spremenljivko v stavku ngFor. Znotraj ngFor začnite od dolžine matrike in odštejte število elementov, po katerih ste že prešli:

   <div *ngFor="naj postavka številk; naj i = indeks;">
   <str> To je ponovljen odstavek: {{numbers.length-i-1}} </str>
   </div>

2. Ustvarite lahko tudi obrnjen seznam v datoteki TypeScript:

   izvoz razredPrimerClassorodjaOnInit{
    številke: niz<številko> = [];
    reversedList: matrika<številko> = [];
   konstruktor() {
   to.številke = Niz(10).fill(1).map((x, i)=>i);
   to.reversedList = to.številke.rezina().reverse();
    }
   }

3. Iterirajte po obrnjenem seznamu z uporabo ngFor:

   <div *ngFor='pusti element reversedList; naj bo i = indeks'>
   <str> To je ponovljen odstavek: {{item}} </str>
   </div>

Kako drugače oblikovati prvi in ​​zadnji element

Prvi in ​​zadnji element lahko oblikujete ločeno od drugih elementov z uporabo najprej in zadnji Kotne spremenljivke. To je alternativa za z uporabo psuedo-razredov CSS všeč :prvi otrok.

1. V stavku ngFor navedite prvo in zadnjo spremenljivko. Uporabite direktivo ngClass za dodelitev modrega in rdečega razreda CSS v prejšnjih korakih. Dodeli modri razred CSS prvemu elementu in rdeči razred CSS zadnjemu elementu:

   <div *ngFor='naj postavka številk; naj prvi = prvi; naj zadnji = zadnji' [ngClass]= "{modra: prva, rdeča: zadnja}">
   <str> To je ponovljen odstavek: {{item}} </str>
   </div>

Kako uporabiti ngFor za prebiranje predmetov

Direktivo ngFor lahko uporabite za vrtenje po predmetih in dostop do njihovih posameznih spremenljivk.

1. Ustvarite seznam predmetov v datoteki TypeScript. V tem primeru bo na voljo seznam oseb z njihovimi podatki:

   izvoz razredPrimerClassorodjaOnInit{
    ljudje = []; 
   konstruktor() {
   to.people = [
    { ime: 'Janez', priimek: 'Smith', poklic: 'HR menedžer', začetni datum: nov datum("2019-02-05") },
    { ime: 'Marija', priimek: 'Johnson', poklic: 'Tehnični uradnik', začetni datum: nov datum("2016-01-07") },
    { ime: 'William', priimek: 'rjav', poklic: 'HR referent', začetni datum: nov datum("2018-03-03") },
    ];
    }
   }

2. V HTML-ju uporabite zanko ngFor za pregledovanje seznama oseb. Vsaka oseba bo dostopna z uporabo oseba spremenljivka. Za dostop do atributov vsake osebe lahko uporabite spremenljivko person:

   <div *ngFor='naj oseba ljudi; naj bo i = indeks'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <str> {{oseba.poklic}} </str>
   <str> {{person.startDate}} </str>
   </div>

Kako uporabiti ugnezdeni ngFor za prikaz predmetov znotraj drugih predmetov

Za prikaz predmetov znotraj drugih predmetov lahko uporabite ugnezdeno zanko for.

1. Spremenite seznam oseb. Vsaka oseba bo imela seznam stikov za nujne primere. Vsak stik za nujne primere shranite kot ločen predmet:

   to.people = [
    {
    ime: 'Janez',
    priimek: 'Smith',
    Kontakti za nujne primere: [
    {ime: 'Amanda Smith', razmerje: 'žena', telefon: '0441239876' },
    {ime: 'Barry Smith', razmerje: 'sin', telefon: '0442239876'}
    ]
    },
    {
    ime: 'Marija',
    priimek: 'Johnson',
    Kontakti za nujne primere: [
    {ime: 'Mark Johnson', razmerje: 'mož', telefon: '0443239876' }
    ]
    },
    ];

2. V HTML-ju ustvarite ugnezdeno zanko v izvirni zanki, da se pomaknete skozi vsak stik za nujne primere in prikažite njihove podrobnosti:

   <div *ngFor='naj oseba ljudi; naj bo i = indeks'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='pustite stik osebe.emergencyContacts; naj bo j = indeks'>
   <h5> Kontakti za nujne primere: </h5>
   <str> {{Kontaktno ime}} </str>
   <str> {{oseba.odnos}} </str>
   <str> {{person.phone}} </str>
   </div>
   <br>
   </div>

Zanka z uporabo ngFor v Angular

Strukturno direktivo ngFor lahko uporabite za dinamično zanko skozi elemente HTML na vašem spletnem mestu. To vam bo omogočilo, da isti blok ponovite za več predmetov ali za določeno število krat.

Uporabite ga lahko tudi za druge trike, kot je preskakovanje sode ali lihe številke ali oblikovanje prvega in zadnjega elementa. Uporabite ga lahko tudi za dinamično upodabljanje številnih predmetov znotraj drugih predmetov.

Obstajajo tudi druge direktive Angular, s katerimi lahko pomagate narediti vaše spletno mesto bolj dinamično. Ti vključujejo ngIf, ngSwitch, ngStyle, ngClass in ngModel.