Kā izmantot ngFor Angular direktīvu

Angular izmanto direktīvas, lai dinamiski renderētu noteiktus HTML elementus jūsu vietnē. Viena no strukturālajām direktīvām, ko varat izmantot, ir ngFor.

Direktīva ngFor ļauj atkārtot vienu un to pašu bloku noteiktu skaitu reižu vai cilpu cauri objektu masīvam, lai parādītu to informāciju. Tas ir spēcīgs rīks, ko pat varat izmantot, lai renderētu objektus citos objektos.

Tam ir arī daudzas funkcijas, kas var būt noderīgas konkrētos scenārijos. Tas ietver pirmā un pēdējā elementa atrašanu vai noteiktu vienumu izlaišanu.

Kā izmantot ngFor, lai pārvietotos caur statiskiem numuriem

Direktīvas ngFor pamatā ir for cilpa, viena no daudzas noderīgas cilpas, kuras atbalsta JavaScript. Sākot ar pašreizējo Angular (14) versiju, jums būs jāizveido masīvs, kurā ir norādīts vienumu skaits, kuru vēlaties veikt.

1. Jūs varat izveidot sarakstu pašā ngFor priekšrakstā. Šis kods atkārtos rindkopu piecas reizes, izmantojot indeksus no 0 līdz 4:

   <div *ngFor='let vienums [0, 1, 2, 3, 4]; lai i = indekss'>
   <lpp> Šī ir atkārtota rindkopa: {{item}} </lpp>
   </div>

2. Tā kā iepriekš minētā metode var nebūt piemērota lieliem masīviem, varat arī dinamiski izveidot masīvu TypeScript failā:

   eksportēt klasēPiemērsClassīstenoOnInit{
    skaitļi: masīvs<numuru> = [];
   konstruktors() {
   // Tādējādi tiks dinamiski izveidots šāds masīvs:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   šis.skaitļi = Masīvs(10).fill(1).map((x, i)=>i);
    }
   }

3. Pēc tam varat pārlūkot skaitļu masīvu HTML:

   <div *ngFor='let skaitļu vienība; lai i = indekss'>
   <lpp>Šī ir atkārtota rindkopa: {{item}}</lpp>
   </div>

Kā izlaist vai ieveidot noteiktus skaitļus

Jūs varat izmantot nepāra vai pat ngMainīgajiem, lai noteiktu katru otro skaitli. Scenārijs, kurā tas varētu šķist noderīgs, ir tad, ja vēlaties veidot katru tabulas nepāra vai pāra rindu, izmantojot citu krāsu.

1. Komponenta CSS failā pievienojiet dažas jaunas CSS klases. Šie ir stili, kurus izmantosit noteiktiem elementiem pāra vai nepāra indeksos:

   .sarkans {
    krāsa: sarkana;
   }
   .zils { 
    krāsa: zila; 
   }
   

2. Deklarē nepāra un pāra mainīgos ngFor priekšrakstā. Šie ir mainīgie, kurus Angular atpazīs. Piešķiriet sarkano CSS klasi pāra skaitļiem un zilo CSS klasi nepāra skaitļiem:

   <div *ngFor='let skaitļu vienība; let odd = nepāra; lai pat = pat' [ngClass]="{sarkans: pāra, zils: nepāra}">
   <lpp> Šī ir atkārtota rindkopa: {{item}} </lpp>
   </div>

3. Palaidiet savu Angular vietni, izmantojot ng kalpot un atveriet to tīmekļa pārlūkprogrammā. Pāra un nepāra HTML elementi mainīsies dažādos stilos, pamatojoties uz to CSS klasi:
4. Ja vēlaties pilnībā izlaist katru pāra skaitli, varat izmantot direktīvu ngIf. Tādējādi tiks izlaisti visi nepāra skaitļi un tiks parādīti tikai pāra skaitļi:

   <div *ngFor='let skaitļu vienība; lai pat = pat'>
   <p *ngIf='pat'> Šī ir atkārtota rindkopa: {{item}} </lpp>
   </div>

Kā skaitīt atpakaļ

Lai skaitītu atpakaļ, varat izmantot tradicionālās metodes, piemēram, apgriezt sarakstu vai skaitīt atpakaļ pa cilpu, izmantojot indeksu.

1. Deklarē indeksa mainīgo ngFor priekšrakstā. Izmantojot ngFor, sāciet ar masīva garumu un atņemiet to vienumu skaitu, kurus jau esat izpētījis:

   <div *ngFor="let skaitļu vienība; lai i = indekss;">
   <lpp> Šī ir atkārtota rindkopa: {{numbers.length-i-1}} </lpp>
   </div>

2. Varat arī izveidot apgrieztu sarakstu TypeScript failā:

   eksportēt klasēPiemērsClassīstenoOnInit{
    skaitļi: masīvs<numuru> = [];
    reversedList: masīvs<numuru> = [];
   konstruktors() {
   šis.skaitļi = Masīvs(10).fill(1).map((x, i)=>i);
   šis.reversedList = šis.numbers.slice().reverse();
    }
   }

3. Atkārtojiet apgriezto sarakstu, izmantojot ngFor:

   <div *ngFor='let item of reversedList; lai i = indekss'>
   <lpp> Šī ir atkārtota rindkopa: {{item}} </lpp>
   </div>

Kā veidot pirmo un pēdējo elementu atšķirīgi

Varat veidot pirmo un pēdējo elementu atsevišķi no citiem elementiem, izmantojot vispirms un Pēdējais Leņķiskie mainīgie. Šī ir alternatīva izmantojot CSS pseido klases patīk :pirmais bērns.

1. Paziņojumā ngFor deklarējiet pirmo un pēdējo mainīgo. Izmantojiet ngClass direktīvu, lai piešķirtu zilās un sarkanās CSS klases iepriekšējās darbībās. Piešķiriet zilo CSS klasi pirmajam elementam un sarkano CSS klasi pēdējam elementam:

   <div *ngFor='let skaitļu vienība; lai pirmais = pirmais; lai pēdējais = pēdējais' [ngClass]= "{zils: pirmais, sarkans: pēdējais}">
   <lpp> Šī ir atkārtota rindkopa: {{item}} </lpp>
   </div>

Kā izmantot ngFor, lai atkārtotu objektus

Varat izmantot direktīvu ngFor, lai pārvietotos caur objektiem un piekļūtu to individuālajiem mainīgajiem.

1. TypeScript failā izveidojiet objektu sarakstu. Šajā gadījumā tiks parādīts personu saraksts ar viņu informāciju:

   eksportēt klasēPiemērsClassīstenoOnInit{
    cilvēki = []; 
   konstruktors() {
   šis.people = [
    { vārds: 'Džons', uzvārds: 'Smits', nodarbošanās: 'HR vadītājs', sākuma datums: jauns datums("2019-02-05") },
    { vārds: 'Marija', uzvārds: 'Džonsons', nodarbošanās: 'Tehniskais darbinieks', sākuma datums: jauns datums("2016-01-07") },
    { vārds: 'Viljams', uzvārds: 'Brūns', nodarbošanās: 'HR darbinieks', sākuma datums: jauns datums("2018-03-03") },
    ];
    }
   }

2. HTML kodā izmantojiet cilpu ngFor, lai pārlūkotu personu sarakstu. Katra persona būs pieejama, izmantojot persona mainīgs. Varat izmantot personas mainīgo, lai piekļūtu katras personas atribūtiem:

   <div *ngFor='ļaut cilvēku cilvēkiem; lai i = indekss'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <lpp> {{persona.nodarbošanās}} </lpp>
   <lpp> {{person.startDate}} </lpp>
   </div>

Kā izmantot ligzdoto ngFor, lai parādītu objektus citos objektos

Varat izmantot ligzdoto cilpu, lai parādītu objektus citos objektos.

1. Mainiet personu sarakstu. Katrai personai būs ārkārtas kontaktpersonu saraksts. Saglabājiet katru avārijas kontaktu kā atsevišķu objektu:

   šis.people = [
    {
    vārds: 'Džons',
    uzvārds: 'Smits',
    ārkārtas kontakti: [
    { vārds: 'Amanda Smita', attiecības: 'Sieva', tālrunis: '0441239876' },
    { vārds: 'Berijs Smits', attiecības: 'Dēls', tālrunis: '0442239876'}
    ]
    },
    {
    vārds: 'Marija',
    uzvārds: 'Džonsons',
    ārkārtas kontakti: [
    { vārds: 'Marks Džonsons', attiecības: 'Vīrs', tālrunis: '0443239876' }
    ]
    },
    ];

2. HTML kodā sākotnējā cilpā izveidojiet ligzdotu cilpu, lai pārvietotos cauri katrai ārkārtas kontaktpersonai un parādītu informāciju par to:

   <div *ngFor='ļaut cilvēku cilvēkiem; lai i = indekss'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='ļaut kontaktēties ar personu.avārijasKontakti; pieņemsim, ka j = indekss'>
   <h5> Ārkārtas kontakti: </h5>
   <lpp> {{kontakta vārds}} </lpp>
   <lpp> {{persona.relationship}} </lpp>
   <lpp> {{person.phone}} </lpp>
   </div>
   <br>
   </div>

Looping, izmantojot ngFor in Angular

Varat izmantot ngFor strukturālo direktīvu, lai dinamiski pārlūkotu HTML elementus savā vietnē. Tas ļaus jums atkārtot vienu un to pašu bloku vairākiem objektiem vai noteiktu skaitu reižu.

Varat to izmantot arī citu triku veikšanai, piemēram, katra pāra vai nepāra skaitļa izlaišanai vai pirmā un pēdējā elementa veidošanai. Varat arī to izmantot, lai dinamiski renderētu daudzus objektus citos objektos.

Ir arī citas Angular direktīvas, kuras varat izmantot, lai padarītu savu vietni dinamiskāku. Tie ietver ngIf, ngSwitch, ngStyle, ngClass un ngModel.