Cum să utilizați directiva ngFor Angular

Angular folosește directive pentru a reda dinamic anumite elemente HTML pe site-ul dvs. web. Una dintre directivele structurale pe care le puteți utiliza este ngFor.

Directiva ngFor vă permite să repetați același bloc de un număr specificat de ori sau să treceți printr-o serie de obiecte pentru a le afișa detaliile. Este un instrument puternic pe care îl puteți folosi chiar și pentru a reda obiecte din alte obiecte.

De asemenea, are multe funcții care pot fi utile în scenarii specifice. Aceasta include găsirea primului și ultimului element sau omiterea anumitor elemente.

Cum să utilizați ngFor pentru a bucla prin numere statice

Directiva ngFor se bazează pe bucla for, una dintre multe bucle utile pe care le acceptă JavaScript. Începând cu versiunea actuală de Angular (14), va trebui să creați o matrice care să aibă numărul de elemente pe care doriți să le parcurgeți.

1. Puteți crea o listă în cadrul instrucțiunii ngFor în sine. Următorul cod va repeta un paragraf de cinci ori, folosind indicii de la 0 la 4:

   <div *ngFor='fie articolul din [0, 1, 2, 3, 4]; fie i = index'>
   <p> Acesta este un paragraf repetat: {{item}} </p>
   </div>

2. Deoarece metoda de mai sus poate să nu fie potrivită pentru matrice mari, puteți crea și dinamic o matrice în fișierul TypeScript:

   export clasăExempluClassunelteOnInit{
    numere: Array<număr> = [];
   constructor() {
   // Aceasta va crea în mod dinamic următoarea matrice:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   acest.numerele = Matrice(10).completati(1).map((x, i) =>i);
    }
   }

3. Apoi puteți parcurge matricea de numere din HTML:

   <div *ngFor='lăsați element de numere; fie i = index'>
   <p>Acesta este un paragraf repetat: {{item}}</p>
   </div>

Cum să săriți sau să stilați anumite numere

Puteți folosi ciudat sau chiar ngPentru variabile pentru a determina fiecare al doilea număr. Un scenariu în care ați putea găsi acest lucru util este dacă doriți să stilați fiecare rând par sau impar dintr-un tabel folosind o culoare diferită.

1. În fișierul CSS pentru o componentă, adăugați câteva clase CSS noi. Acestea sunt stilurile pe care le veți folosi pentru anumite elemente la indicii pari sau impari:

   .roșu {
    culoarea rosie;
   }
   .albastru { 
    Culoarea albastra; 
   }
   

2. Declarați variabilele pare și impare în instrucțiunea ngFor. Acestea sunt variabile pe care Angular le va recunoaște. Atribuiți clasa roșie CSS numerelor pare și clasa albastră CSS numerelor impare:

   <div *ngFor='lăsați element de numere; let odd = impar; let even = even' [ngClass]="{roșu: par, albastru: impar}">
   <p> Acesta este un paragraf repetat: {{item}} </p>
   </div>

3. Rulați site-ul dvs. Angular folosind ng servi și deschideți-l în browserul web. Elementele HTML pare și impare vor alterna între diferitele stiluri în funcție de clasa lor CSS:
4. Dacă doriți să săriți complet fiecare număr par, puteți utiliza directiva ngIf. Aceasta va omite toate numerele impare și va afișa numai numerele pare:

   <div *ngFor='lăsați element de numere; let even = even'>
   <p *ngIf='chiar'> Acesta este un paragraf repetat: {{item}} </p>
   </div>

Cum să numărăm înapoi

Pentru a număra înapoi, puteți folosi metode tradiționale, cum ar fi inversarea unei liste sau numărarea înapoi prin buclă folosind un index.

1. Declarați o variabilă index în instrucțiunea ngFor. În cadrul ngFor, începeți de la lungimea matricei și deduceți numărul de articole prin care ați trecut deja în buclă:

   <div *ngFor="lăsați element de numere; fie i = index;">
   <p> Acesta este un paragraf repetat: {{numbers.length-i-1}} </p>
   </div>

2. De asemenea, puteți crea o listă inversată în fișierul TypeScript:

   export clasăExempluClassunelteOnInit{
    numere: Array<număr> = [];
    lista inversată: matrice<număr> = [];
   constructor() {
   acest.numerele = Matrice(10).completati(1).map((x, i) =>i);
   acest.reversedList = acest.numbers.slice().reverse();
    }
   }

3. Iterați peste lista inversată folosind ngFor:

   <div *ngFor='lasă elementul din lista inversată; fie i = index'>
   <p> Acesta este un paragraf repetat: {{item}} </p>
   </div>

Cum să stilați primul și ultimul element în mod diferit

Puteți stila primul și ultimul element separat de celelalte elemente folosind primul și ultimul Variabile unghiulare. Aceasta este o alternativă la folosind pseudoclase CSS ca :primul copil.

1. În instrucțiunea ngFor, declarați prima și ultima variabilă. Utilizați directiva ngClass pentru a atribui clasele CSS albastre și roșii în pașii anteriori. Atribuiți clasa albastră CSS primului element și clasa roșie CSS ultimului element:

   <div *ngFor='lăsați element de numere; lasă primul = primul; let last = last' [ngClass]= "{albastru: primul, roșu: ultimul}">
   <p> Acesta este un paragraf repetat: {{item}} </p>
   </div>

Cum să utilizați un ngFor pentru a repeta peste obiecte

Puteți folosi directiva ngFor pentru a parcurge obiectele și pentru a accesa variabilele lor individuale.

1. Creați o listă de obiecte în fișierul TypeScript. În acest caz, va exista o listă de persoane cu detaliile lor:

   export clasăExempluClassunelteOnInit{
    oameni = []; 
   constructor() {
   acest.oameni = [
    { Nume: 'Ioan', numele de familie: 'Smith', ocupatie: 'Manager de resurse umane', startDate: data noua("2019-02-05") },
    { Nume: 'Maria', numele de familie: 'Johnson', ocupatie: 'Ofițer tehnic', startDate: data noua("2016-01-07") },
    { Nume: 'William', numele de familie: 'Maro', ocupatie: 'Ofițer HR', startDate: data noua("2018-03-03") },
    ];
    }
   }

2. În HTML, utilizați bucla ngFor pentru a parcurge lista de persoane. Fiecare persoană va fi accesibilă folosind persoană variabil. Puteți folosi variabila persoană pentru a accesa atributele fiecărei persoane:

   <div *ngFor='lasa persoana de oameni; fie i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{persoană.ocupație}} </p>
   <p> {{person.startDate}} </p>
   </div>

Cum să utilizați un ngFor imbricat pentru a afișa obiecte în interiorul altor obiecte

Puteți utiliza o buclă imbricată pentru a afișa obiecte în interiorul altor obiecte.

1. Modificați lista de persoane. Fiecare persoană va avea o listă de contacte de urgență. Păstrați fiecare contact de urgență ca obiect separat:

   acest.oameni = [
    {
    Nume: 'Ioan',
    numele de familie: 'Smith',
    contacte de urgență: [
    { Nume: 'Amanda Smith', relatie: 'Soție', telefon: '0441239876' },
    { Nume: 'Barry Smith', relatie: 'fiule', telefon: '0442239876'}
    ]
    },
    {
    Nume: 'Maria',
    numele de familie: 'Johnson',
    contacte de urgență: [
    { Nume: 'Mark Johnson', relatie: 'soțul', telefon: '0443239876' }
    ]
    },
    ];

2. În HTML, creați o buclă imbricată în bucla originală pentru a parcurge fiecare contact de urgență și afișați detaliile acestora:

   <div *ngFor='lasa persoana de oameni; fie i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='lăsați contactul persoanei.emergencyContacts; fie j = indice'>
   <h5> Contacte de urgență: </h5>
   <p> {{nume de contact}} </p>
   <p> {{person.relationship}} </p>
   <p> {{person.phone}} </p>
   </div>
   <br>
   </div>

Buclă folosind ngFor în Angular

Puteți utiliza directiva structurală ngFor pentru a parcurge în mod dinamic elementele HTML de pe site-ul dvs. web. Acest lucru vă va permite să repetați același bloc pentru un număr de obiecte sau pentru un anumit număr de ori.

De asemenea, îl puteți folosi pentru a face alte trucuri, cum ar fi săriți peste fiecare număr par sau impar sau stilizarea primului și ultimului element. De asemenea, îl puteți folosi pentru a reda dinamic multe obiecte din alte obiecte.

Există și alte directive Angular pe care le puteți folosi pentru a vă face site-ul mai dinamic. Acestea includ ngIf, ngSwitch, ngStyle, ngClass și ngModel.