Kuinka käyttää ngFor Angular -direktiiviä

Angular käyttää ohjeita tiettyjen HTML-elementtien dynaamiseen hahmontamiseen verkkosivustollasi. Yksi rakennedirektiiveistä, joita voit käyttää, on ngFor.

ngFor-direktiivin avulla voit toistaa saman lohkon tietyn määrän kertoja tai käydä läpi objektijoukon näyttääksesi niiden tiedot. Se on tehokas työkalu, jota voit jopa käyttää objektien hahmontamiseen muissa objekteissa.

Siinä on myös monia toimintoja, joista voi olla hyötyä tietyissä skenaarioissa. Tähän sisältyy ensimmäisen ja viimeisen elementin etsiminen tai tiettyjen kohteiden ohittaminen.

Kuinka käyttää ngForia staattisten numeroiden kiertämiseen

ngFor-direktiivi perustuu for-silmukkaan, joka on yksi monia hyödyllisiä silmukoita, joita JavaScript tukee. Nykyisestä Angular-versiosta (14) lähtien sinun on luotava taulukko, jossa on haluamasi määrä kohteita.

1. Voit luoda luettelon itse ngFor-lauseessa. Seuraava koodi toistaa kappaleen viisi kertaa indekseillä 0-4:

   <div *ngFor='anna kohteen [0, 1, 2, 3, 4]; olkoon i = indeksi'>
   <p> Tämä on toistuva kappale: {{item}} </s>
   </div>

2. Koska yllä oleva menetelmä ei välttämättä sovellu suurille taulukoille, voit myös luoda taulukon dynaamisesti TypeScript-tiedostoon:

   viedä luokkaaEsimerkkiluokkatoteuttaaOnInit{
    numerot: Array<määrä> = [];
   rakentaja() {
   // Tämä luo dynaamisesti seuraavan taulukon:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   Tämä.numbers = Array(10).täyttää(1).map((x, i)=>i);
    }
   }

3. Voit sitten käydä läpi HTML-kooditaulukon:

   <div *ngFor='anna numerot; olkoon i = indeksi'>
   <p>Tämä on toistuva kappale: {{item}}</s>
   </div>

Kuinka ohittaa tai muokata tiettyjä numeroita

Voit käyttää outo tai jopa ngJos muuttujat määrittävät joka toisen luvun. Tämä saattaa olla hyödyllinen skenaario, jos haluat muotoilla taulukon jokaisen parittoman tai parillisen rivin eri värillä.

1. Lisää komponentin CSS-tiedostoon uusia CSS-luokkia. Nämä ovat tyylejä, joita käytät tietyille elementeille parillisissa tai parittomissa indekseissä:

   .punainen {
    väri punainen;
   }
   .sininen { 
    väri: sininen; 
   }
   

2. Ilmoita parittomat ja parilliset muuttujat ngFor-lauseessa. Nämä ovat muuttujia, jotka Angular tunnistaa. Määritä punainen CSS-luokka parillisille luvuille ja sininen CSS-luokka parittomille numeroille:

   <div *ngFor='anna numerot; anna pariton = pariton; anna parillinen = parillinen' [ngClass]="{punainen: parillinen, sininen: pariton}">
   <p> Tämä on toistuva kappale: {{item}} </s>
   </div>

3. Suorita Angular-verkkosivustosi käyttämällä palvella ja avaa se verkkoselaimessa. Parilliset ja parittomat HTML-elementit vaihtelevat eri tyylien välillä CSS-luokkansa perusteella:
4. Jos haluat ohittaa jokaisen parillisen luvun kokonaan, voit käyttää ngIf-direktiiviä. Tämä ohittaa kaikki parittomat luvut ja näyttää vain parilliset luvut:

   <div *ngFor='anna numerot; anna parillinen = parillinen'>
   <p *ngIf='jopa'> Tämä on toistuva kappale: {{item}} </s>
   </div>

Kuinka laskea taaksepäin

Voit laskea taaksepäin käyttämällä perinteisiä menetelmiä, kuten kääntämällä luetteloa taaksepäin tai laskemalla taaksepäin silmukan läpi indeksin avulla.

1. Ilmoita indeksimuuttuja ngFor-lauseessa. Aloita ngForissa taulukon pituudesta ja vähennä jo selaamiesi kohteiden määrä:

   <div *ngFor="anna numerot; anna i = indeksi;">
   <p> Tämä on toistuva kappale: {{numbers.length-i-1}} </s>
   </div>

2. Voit myös luoda käänteisen luettelon TypeScript-tiedostoon:

   viedä luokkaaEsimerkkiluokkatoteuttaaOnInit{
    numerot: Array<määrä> = [];
    käänteinenList: Array<määrä> = [];
   rakentaja() {
   Tämä.numbers = Array(10).täyttää(1).map((x, i)=>i);
   Tämä.reversedList = Tämä.numbers.slice().reverse();
    }
   }

3. Toista käänteinen luettelo ngFor: lla:

   <div *ngFor='anna kohteen käänteinenList; olkoon i = indeksi'>
   <p> Tämä on toistuva kappale: {{item}} </s>
   </div>

Kuinka muotoilla ensimmäinen ja viimeinen elementti eri tavalla

Voit muotoilla ensimmäisen ja viimeisen elementin erikseen muista elementeistä käyttämällä ensimmäinen ja kestää Kulmamuuttujat. Tämä on vaihtoehto käyttämällä CSS-psuedo-luokkia Kuten :ensimmäinen lapsi.

1. Ilmoita ngFor-käskyssä ensimmäinen ja viimeinen muuttuja. Käytä ngClass-direktiiviä määrittääksesi siniset ja punaiset CSS-luokat edellisissä vaiheissa. Määritä sininen CSS-luokka ensimmäiselle elementille ja punainen CSS-luokka viimeiselle elementille:

   <div *ngFor='anna numerot; anna ensin = ensimmäinen; anna kestää = viimeinen' [ngClass]= "{sininen: ensimmäinen, punainen: viimeinen}">
   <p> Tämä on toistuva kappale: {{item}} </s>
   </div>

Kuinka käyttää ngForia objektien toistamiseen

Voit käyttää ngFor-direktiiviä objektien läpikäymiseen ja niiden yksittäisten muuttujien käyttämiseen.

1. Luo TypeScript-tiedostoon objektiluettelo. Tässä tapauksessa on luettelo henkilöistä heidän tietoineen:

   viedä luokkaaEsimerkkiluokkatoteuttaaOnInit{
    ihmiset = []; 
   rakentaja() {
   Tämä.people = [
    { etunimi: 'John', sukunimi: 'Smith', ammatti: 'HR Manager', aloituspäivämäärä: uusi päivämäärä("2019-02-05") },
    { etunimi: 'Mary', sukunimi: 'Johnson', ammatti: 'Tekninen johtaja', aloituspäivämäärä: uusi päivämäärä("2016-01-07") },
    { etunimi: 'William', sukunimi: 'Ruskea', ammatti: 'HR-päällikkö', aloituspäivämäärä: uusi päivämäärä("2018-03-03") },
    ];
    }
   }

2. Käytä ngFor-silmukkaa HTML-koodissa ihmisten luettelon selaamiseen. Jokainen henkilö on tavoitettavissa käyttämällä henkilö muuttuja. Voit käyttää henkilömuuttujaa kunkin henkilön attribuuttien käyttämiseen:

   <div *ngFor='anna henkilö ihmisten; olkoon i = indeksi'>
   <h2> {{person.firstName}} {{person.sukunimi}} </h2>
   <p> {{henkilö.ammatti}} </s>
   <p> {{person.startDate}} </s>
   </div>

Sisäkkäisen ngForin käyttäminen objektien näyttämiseen muiden objektien sisällä

Voit käyttää sisäkkäistä silmukkaa näyttääksesi objektit muiden objektien sisällä.

1. Muokkaa henkilöluetteloa. Jokaisella henkilöllä on hätäyhteyshenkilöluettelo. Säilytä jokainen hätäkontakti erillisenä esineenä:

   Tämä.people = [
    {
    etunimi: 'John',
    sukunimi: 'Smith',
    hätäyhteystiedot: [
    { nimi: 'Amanda Smith', suhde: 'Vaimo', puhelin: '0441239876' },
    { nimi: 'Barry Smith', suhde: 'Poika', puhelin: '0442239876'}
    ]
    },
    {
    etunimi: 'Mary',
    sukunimi: 'Johnson',
    hätäyhteystiedot: [
    { nimi: 'Mark Johnson', suhde: 'Aviomies', puhelin: '0443239876' }
    ]
    },
    ];

2. Luo HTML-koodissa sisäkkäinen silmukka alkuperäisen silmukan sisään käydäksesi läpi jokaisen hätäyhteyshenkilön ja näyttääksesi heidän tiedot:

   <div *ngFor='anna henkilö ihmisten; olkoon i = indeksi'>
   <h2> {{person.firstName}} {{person.sukunimi}} </h2>
   <div *ngFor='anna yhteys henkilöön.hätäyhteystiedot; olkoon j = indeksi'>
   <h5> Yhteystiedot hätätilanteissa: </h5>
   <p> {{contact.name}} </s>
   <p> {{person.relationship}} </s>
   <p> {{person.phone}} </s>
   </div>
   <br>
   </div>

Silmukka ngForilla Angularissa

Voit käyttää ngFor-rakennedirektiiviä dynaamisesti kiertääksesi verkkosivustosi HTML-elementtejä. Näin voit toistaa saman lohkon useille objekteille tai tietyn määrän kertoja.

Voit käyttää sitä myös muiden temppujen tekemiseen, kuten jokaisen parillisen tai parittoman luvun ohittamiseen tai ensimmäisen ja viimeisen elementin muotoiluun. Voit käyttää sitä myös monien objektien dynaamiseen hahmontamiseen muissa objekteissa.

On olemassa muita Angular-direktiivejä, joiden avulla voit tehdä verkkosivustostasi dynaamisemman. Näitä ovat ngIf, ngSwitch, ngStyle, ngClass ja ngModel.