Kuidas kasutada ngFor Angular direktiivi

Angular kasutab teie veebisaidi teatud HTML-elementide dünaamiliseks renderdamiseks direktiive. Üks struktuuridirektiive, mida saate kasutada, on ngFor.

Direktiiv ngFor võimaldab teil korrata sama plokki määratud arv kordi või liikuda läbi objektide massiivi, et kuvada nende üksikasjad. See on võimas tööriist, mida saate kasutada isegi objektide renderdamiseks teistes objektides.

Sellel on ka palju funktsioone, mis võivad konkreetsete stsenaariumide korral kasulikud olla. See hõlmab esimese ja viimase elemendi leidmist või teatud üksuste vahelejätmist.

Kuidas kasutada ngFori staatiliste numbrite loomiseks

Direktiiv ngFor põhineb for tsüklil, üks palju kasulikke silmuseid, mida JavaScript toetab. Angulari (14) praeguse versiooni seisuga peate looma massiivi, mis sisaldab nii palju üksusi, mida soovite läbida.

1. Saate luua loendi ngFori lauses endas. Järgmine kood kordab lõiku viis korda, kasutades indekseid 0 kuni 4:

   <div *ngFor='let item of [0, 1, 2, 3, 4]; olgu i = indeks'>
   <lk> See on korduv lõik: {{item}} </lk>
   </div>

2. Kuna ülaltoodud meetod ei pruugi suurte massiivide jaoks sobida, saate massiivi dünaamiliselt luua ka TypeScript-failis:

   eksportida klassNäideklassrakendabOnInit{
    numbrid: massiiv<number> = [];
   konstruktor() {
   // See loob dünaamiliselt järgmise massiivi:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   see.numbrid = Massiiv(10).fill(1).map((x, i)=>i);
    }
   }

3. Seejärel saate HTML-is numbrimassiivi läbida:

   <div *ngFor='lase numbrite üksus; olgu i = indeks'>
   <lk>See on korduv lõik: {{item}}</lk>
   </div>

Teatud numbrite vahelejätmine või stiil

Saate kasutada kummaline või isegi ngMuutujate jaoks iga teise numbri määramiseks. See võib teile kasulikuks osutuda juhul, kui soovite tabeli iga paaritu või paarisrea stiilida erinevat värvi kasutades.

1. Lisage komponendi CSS-faili mõned uued CSS-klassid. Need on stiilid, mida kasutate teatud elementide jaoks paaris või paaritu indeksiga:

   .punane {
    värv: punane;
   }
   .sinine { 
    värv: sinine; 
   }
   

2. Paaritute ja paaris muutujate deklareerimine ngFor-lauses. Need on muutujad, mille Angular tunneb ära. Määrake paarisarvudele punane CSS-klass ja paaritutele numbritele sinine CSS-klass:

   <div *ngFor='lase numbrite üksus; lase paaritu = paaritu; olgu paaris = paaris' [ngClass]="{punane: paaris, sinine: paaritu}">
   <lk> See on korduv lõik: {{item}} </lk>
   </div>

3. Käivitage oma Angular veebisait kasutades teenida ja avage see veebibrauseris. Paaris- ja paaritu HTML-i elemendid vahelduvad erinevate stiilide vahel, lähtudes nende CSS-klassist:
4. Kui soovite iga paarisarvu täielikult vahele jätta, võite kasutada käskkirja ngIf. See jätab vahele kõik paaritud numbrid ja kuvab ainult paarisarvud:

   <div *ngFor='lase numbrite üksus; olgu paaris = paaris'>
   <p *ngIf='isegi'> See on korduv lõik: {{item}} </lk>
   </div>

Kuidas tagurpidi lugeda

Tagasi loendamiseks võite kasutada traditsioonilisi meetodeid, nagu loendi tagurpidi pööramine või tsüklis tagasiloendamine indeksi abil.

1. Indeksmuutuja deklareerimine lauses ngFor. ngForis alustage massiivi pikkusest ja lahutage juba läbitud üksuste arv:

   <div *ngFor="lase numbrite üksus; olgu i = indeks;">
   <lk> See on korduv lõik: {{numbers.length-i-1}} </lk>
   </div>

2. TypeScripti failis saate luua ka vastupidise loendi.

   eksportida klassNäideklassrakendabOnInit{
    numbrid: massiiv<number> = [];
    reverseList: massiiv<number> = [];
   konstruktor() {
   see.numbrid = Massiiv(10).fill(1).map((x, i)=>i);
   see.reversedList = see.numbers.slice().reverse();
    }
   }

3. Korrake ümberpööratud loendit kasutades ngFor:

   <div *ngFor='let item of reversedList; olgu i = indeks'>
   <lk> See on korduv lõik: {{item}} </lk>
   </div>

Kuidas esimest ja viimast elementi erinevalt kujundada

Saate esimese ja viimase elemendi stiilida teistest elementidest eraldi, kasutades esiteks ja viimane Nurgamuutujad. See on alternatiiv kasutades CSS-i pseedo-klasse meeldib :esimene laps.

1. Deklareerige lauses ngFor esimene ja viimane muutuja. Eelmistes sammudes sinise ja punase CSS-klassi määramiseks kasutage käsku ngClass. Määrake esimesele elemendile sinine CSS-klass ja viimasele elemendile punane CSS-klass:

   <div *ngFor='lase numbrite üksus; las esimene = esimene; las kesta = viimane' [ngClass]= "{sinine: esimene, punane: viimane}">
   <lk> See on korduv lõik: {{item}} </lk>
   </div>

Kuidas kasutada ngFori objektide üle itereerimiseks

Saate kasutada käsku ngFor, et liikuda läbi objektide ja pääseda juurde nende individuaalsetele muutujatele.

1. Looge TypeScript-failis objektide loend. Sel juhul kuvatakse inimeste loend koos nende andmetega:

   eksportida klassNäideklassrakendabOnInit{
    inimesed = []; 
   konstruktor() {
   see.people = [
    { eesnimi: 'John', perekonnanimi: 'Smith', amet: 'personalijuht', alguskuupäev: uus kuupäev("2019-02-05") },
    { eesnimi: 'Maarja', perekonnanimi: 'Johnson', amet: 'Tehniline ametnik', alguskuupäev: uus kuupäev("2016-01-07") },
    { eesnimi: 'William', perekonnanimi: 'Pruun', amet: 'personalijuht', alguskuupäev: uus kuupäev("2018-03-03") },
    ];
    }
   }

2. HTML-is kasutage inimeste loendi sirvimiseks tsüklit ngFor. Iga inimene on juurdepääsetav kasutades isik muutuv. Saate kasutada isikumuutujat, et pääseda juurde iga inimese atribuutidele.

   <div *ngFor='lase inimene inimestest; olgu i = indeks'>
   <h2> {{person.firstName}} {{person.perenimi}} </h2>
   <lk> {{inimene.amet}} </lk>
   <lk> {{person.startDate}} </lk>
   </div>

Kuidas kasutada pesastatud ngFori objektide kuvamiseks teistes objektides

Saate kasutada pesastatud tsüklit, et kuvada objektid teistes objektides.

1. Muutke inimeste loendit. Igal inimesel on hädaolukorras kontaktide loend. Hoidke iga hädaabikontakt eraldi objektina:

   see.people = [
    {
    eesnimi: 'John',
    perekonnanimi: 'Smith',
    hädaabikontaktid: [
    { nimi: 'Amanda Smith', suhe: 'Naine', telefon: '0441239876' },
    { nimi: 'Barry Smith', suhe: 'Poeg', telefon: '0442239876'}
    ]
    },
    {
    eesnimi: 'Maarja',
    perekonnanimi: 'Johnson',
    hädaabikontaktid: [
    { nimi: 'Mark Johnson', suhe: 'Abikaasa', telefon: '0443239876' }
    ]
    },
    ];

2. Looge HTML-is oma algsesse tsüklisse pesastatud silmus, et liikuda läbi iga hädaabikontakti ja kuvada nende üksikasjad.

   <div *ngFor='lase inimene inimestest; olgu i = indeks'>
   <h2> {{person.firstName}} {{person.perenimi}} </h2>
   <div *ngFor='lasta kontakti isikuga.hädaabiKontaktid; olgu j = indeks'>
   <h5> Hädaabi kontaktid: </h5>
   <lk> {{kontaktisiku nimi}} </lk>
   <lk> {{person.relationship}} </lk>
   <lk> {{person.phone}} </lk>
   </div>
   <br>
   </div>

Silmuse loomine ngFori abil nurgas

Struktuuridirektiivi ngFor abil saate oma veebisaidil HTML-elementide dünaamiliselt läbi vaadata. See võimaldab teil korrata sama plokki mitme objekti jaoks või määratud arv kordi.

Saate seda kasutada ka muude trikkide tegemiseks, näiteks iga paaris või paaritu numbri vahelejätmiseks või esimese ja viimase elemendi kujundamiseks. Saate seda kasutada ka paljude objektide dünaamiliseks renderdamiseks teistes objektides.

Veebisaidi dünaamilisemaks muutmiseks saate kasutada ka teisi Angular direktiive. Nende hulka kuuluvad ngIf, ngSwitch, ngStyle, ngClass ja ngModel.