Kako koristiti ngFor kutnu direktivu

Angular koristi direktive za dinamičko generiranje određenih HTML elemenata na vašoj web stranici. Jedna od strukturnih direktiva koju možete koristiti je ngFor.

Direktiva ngFor vam omogućuje da ponovite isti blok određeni broj puta ili da prođete kroz niz objekata kako biste prikazali njihove detalje. To je moćan alat koji čak možete koristiti za renderiranje objekata unutar drugih objekata.

Također ima mnogo funkcija koje mogu biti korisne u određenim scenarijima. To uključuje pronalaženje prvog i posljednjeg elementa ili preskakanje određenih stavki.

Kako koristiti ngFor za petlju kroz statičke brojeve

Direktiva ngFor temelji se na for petlji, jednoj od mnoge korisne petlje koje JavaScript podržava. Od trenutne verzije Angulara (14), morat ćete stvoriti niz koji ima broj stavki kroz koje želite proći.

1. Možete kreirati popis unutar same izjave ngFor. Sljedeći će kod ponoviti odlomak pet puta, koristeći indekse od 0 do 4:
   instagram viewer

   <div *ngFor='neka stavka od [0, 1, 2, 3, 4]; neka je i = indeks'>
   <str> Ovo je ponovljeni odlomak: {{item}} </str>
   </div>

2. Budući da gornja metoda možda nije prikladna za velike nizove, također možete dinamički stvoriti niz u datoteci TypeScript:

   izvoz razredaPrimjerClassprovodiOnInit{
    brojevi: Niz<broj> = [];
   konstruktor() {
   // Ovo će dinamički stvoriti sljedeći niz:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   ovaj.brojevi = Niz(10).ispuniti(1).mapa((x, i)=>i);
    }
   }

3. Zatim možete proći kroz niz brojeva u HTML-u:

   <div *ngFor='neka stavka brojeva; neka je i = indeks'>
   <str>Ovo je ponovljeni odlomak: {{item}}</str>
   </div>

Kako preskočiti ili stilizirati određene brojeve

Možete koristiti neparan ili čak ngZa varijable za određivanje svakog drugog broja. Scenarij u kojem bi vam ovo moglo biti korisno je ako želite stilizirati svaki neparni ili paran red u tablici koristeći drugu boju.

1. U CSS datoteci za komponentu dodajte neke nove CSS klase. Ovo su stilovi koje ćete koristiti za određene elemente na parnim ili neparnim indeksima:

   .Crvena {
    boja: crvena;
   }
   .plava { 
    boja: plava; 
   }
   

2. Deklarirajte neparne i parne varijable unutar naredbe ngFor. To su varijable koje će Angular prepoznati. Dodijelite crvenu CSS klasu parnim brojevima, a plavu CSS klasu neparnim brojevima:

   <div *ngFor='neka stavka brojeva; neka neparan = neparan; neka čak = čak' [ngClass]="{crveno: parno, plavo: neparno}">
   <str> Ovo je ponovljeni odlomak: {{item}} </str>
   </div>

3. Pokrenite svoju Angular web stranicu pomoću ng poslužiti i otvorite ga u web pregledniku. Parni i neparni HTML elementi izmjenjivat će se između različitih stilova na temelju njihove CSS klase:
4. Ako želite potpuno preskočiti svaki paran broj, možete koristiti direktivu ngIf. Ovo će preskočiti sve neparne brojeve i prikazati samo parne brojeve:

   <div *ngFor='neka stavka brojeva; neka čak = čak'>
   <p *ngIf='čak'> Ovo je ponovljeni odlomak: {{item}} </str>
   </div>

Kako brojati unatrag

Za brojanje unatrag možete koristiti tradicionalne metode kao što je preokretanje popisa ili brojanje unatrag kroz petlju pomoću indeksa.

1. Deklarirajte varijablu indeksa u naredbi ngFor. Unutar ngFor, počnite od duljine niza i oduzmite broj stavki kroz koje ste već prošli:

   <div *ngFor="neka stavka brojeva; neka je i = indeks;">
   <str> Ovo je ponovljeni odlomak: {{numbers.length-i-1}} </str>
   </div>

2. Također možete stvoriti obrnuti popis u datoteci TypeScript:

   izvoz razredaPrimjerClassprovodiOnInit{
    brojevi: Niz<broj> = [];
    reversedList: Niz<broj> = [];
   konstruktor() {
   ovaj.brojevi = Niz(10).ispuniti(1).mapa((x, i)=>i);
   ovaj.obrnuti popis = ovaj.brojevi.srez().obrnuti();
    }
   }

3. Iterirajte preko obrnute liste koristeći ngFor:

   <div *ngFor='neka stavka reversedList; neka je i = indeks'>
   <str> Ovo je ponovljeni odlomak: {{item}} </str>
   </div>

Kako drugačije stilizirati prvi i posljednji element

Možete stilizirati prvi i zadnji element odvojeno od ostalih elemenata pomoću prvi i posljednji Kutne varijable. Ovo je alternativa za koristeći CSS psuedo-klase Kao :prvo dijete.

1. U naredbi ngFor deklarirajte prvu i posljednju varijable. Upotrijebite direktivu ngClass da dodijelite plave i crvene CSS klase u prethodnim koracima. Dodijelite plavu CSS klasu prvom elementu, a crvenu CSS klasu posljednjem elementu:

   <div *ngFor='neka stavka brojeva; neka prvi = prvi; neka traje = posljednja' [ngClass]= "{plava: prva, crvena: zadnja}">
   <str> Ovo je ponovljeni odlomak: {{item}} </str>
   </div>

Kako koristiti ngFor za ponavljanje objekata

Možete koristiti direktivu ngFor za petlju kroz objekte i pristup njihovim pojedinačnim varijablama.

1. Napravite popis objekata u datoteci TypeScript. U ovom slučaju, postojat će popis osoba s njihovim podacima:

   izvoz razredaPrimjerClassprovodiOnInit{
    ljudi = []; 
   konstruktor() {
   ovaj.people = [
    { ime: 'Ivan', prezime: 'Smith', okupacija: 'HR menadžer', datum početka: novi datum("2019-02-05") },
    { ime: 'Marija', prezime: 'Johnson', okupacija: 'Tehnički referent', datum početka: novi datum("2016-01-07") },
    { ime: 'William', prezime: 'Smeđa', okupacija: 'Službenik za ljudske resurse', datum početka: novi datum("2018-03-03") },
    ];
    }
   }

2. U HTML-u koristite petlju ngFor za petlju kroz popis osoba. Svaka osoba će biti dostupna pomoću osoba varijabla. Možete koristiti varijablu person za pristup atributima svake osobe:

   <div *ngFor='neka osoba od ljudi; neka je i = indeks'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <str> {{osoba.okupacija}} </str>
   <str> {{person.startDate}} </str>
   </div>

Kako koristiti ugniježđeni ngFor za prikaz objekata unutar drugih objekata

Možete koristiti ugniježđenu for petlju za prikaz objekata unutar drugih objekata.

1. Izmijenite popis osoba. Svaka osoba imat će popis kontakata za hitne slučajeve. Pohranite svaki kontakt za hitne slučajeve kao zaseban objekt:

   ovaj.people = [
    {
    ime: 'Ivan',
    prezime: 'Smith',
    Kontakti za hitne slučajeve: [
    { Ime: 'Amanda Smith', odnos: 'Žena', telefon: '0441239876' },
    { Ime: 'Barry Smith', odnos: 'Sin', telefon: '0442239876'}
    ]
    },
    {
    ime: 'Marija',
    prezime: 'Johnson',
    Kontakti za hitne slučajeve: [
    { Ime: 'Mark Johnson', odnos: 'Suprug', telefon: '0443239876' }
    ]
    },
    ];

2. U HTML-u stvorite ugniježđenu petlju unutar svoje izvorne petlje za petlju kroz svaki kontakt za hitne slučajeve i prikažite njihove pojedinosti:

   <div *ngFor='neka osoba od ljudi; neka je i = indeks'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='neka kontakt osobe.emergencyContacts; neka je j = indeks'>
   <h5> Kontakti za hitne slučajeve: </h5>
   <str> {{ime kontakta}} </str>
   <str> {{osoba.odnos}} </str>
   <str> {{osoba.telefon}} </str>
   </div>
   <br>
   </div>

Petlja korištenjem ngFor u Angularu

Možete koristiti strukturnu direktivu ngFor za dinamičko petlje kroz HTML elemente na vašoj web stranici. To će vam omogućiti da ponovite isti blok za određeni broj objekata ili određeni broj puta.

Također ga možete koristiti za druge trikove kao što je preskakanje svakog parnog ili neparnog broja ili stiliziranje prvog i posljednjeg elementa. Također ga možete koristiti za dinamički prikaz mnogih objekata unutar drugih objekata.

Postoje i druge smjernice Angulara koje možete koristiti kako biste svoju web stranicu učinili dinamičnijom. To uključuje ngIf, ngSwitch, ngStyle, ngClass i ngModel.