Slik bruker du ngFor Angular-direktivet

Angular bruker direktiver for dynamisk å gjengi visse HTML-elementer på nettstedet ditt. Et av de strukturelle direktivene du kan bruke er ngFor.

ngFor-direktivet lar deg gjenta den samme blokken et spesifisert antall ganger, eller gå gjennom en rekke objekter for å vise detaljene deres. Det er et kraftig verktøy som du til og med kan bruke til å gjengi objekter i andre objekter.

Den har også mange funksjoner som kan være nyttige i spesifikke scenarier. Dette inkluderer å finne de første og siste elementene eller hoppe over visse elementer.

Hvordan bruke ngFor til å gå gjennom statiske tall

ngFor-direktivet er basert på for-løkken, en av mange nyttige løkker som JavaScript støtter. Fra og med den nåværende versjonen av Angular (14), må du lage en matrise som har antallet elementer du vil gå gjennom.

1. Du kan lage en liste i selve ngFor-setningen. Følgende kode vil gjenta et avsnitt fem ganger ved å bruke indeksene 0 til 4:

   <div *ngFor='la element av [0, 1, 2, 3, 4]; la i = indeks'>
   <s> Dette er et gjentatt avsnitt: {{item}} </s>
   </div>

2. Siden metoden ovenfor kanskje ikke er egnet for store matriser, kan du også dynamisk opprette en matrise i TypeScript-filen:

   eksport klasseEksempelKlasseredskaperOnInit{
    tall: Array<Antall> = [];
   konstruktør() {
   // Dette vil dynamisk lage følgende array:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   dette.numbers = Array(10).fylle(1).map((x, i)=>i);
    }
   }

3. Du kan deretter gå gjennom tallarrayen i HTML-en:

   <div *ngFor='la element av tall; la i = indeks'>
   <s>Dette er et gjentatt avsnitt: {{item}}</s>
   </div>

Hvordan hoppe over eller style visse tall

Du kan bruke merkelig eller til og med ngFor variabler for å bestemme hvert andre tall. Et scenario der du kan finne dette nyttig er hvis du vil style hver oddetall eller partall rad i en tabell med en annen farge.

1. Legg til noen nye CSS-klasser i CSS-filen for en komponent. Dette er stilene du vil bruke for visse elementer ved partall eller oddetallsindeks:

   .rød {
    fargen rød;
   }
   .blå { 
    farge: blå; 
   }
   

2. Erklær oddetalls- og partallsvariabler i ngFor-setningen. Dette er variabler som Angular vil gjenkjenne. Tilordne den røde CSS-klassen til partall og den blå CSS-klassen til oddetall:

   <div *ngFor='la element av tall; la oddetall = oddetall; la jevn = jevn' [ngClass]="{rød: partall, blå: oddetall}">
   <s> Dette er et gjentatt avsnitt: {{item}} </s>
   </div>

3. Kjør Angular-nettstedet ditt ved å bruke ng tjene og åpne den i nettleseren. Even og odde HTML-elementer vil veksle mellom de forskjellige stilene basert på deres CSS-klasse:
4. Hvis du vil hoppe over hvert partall helt, kan du bruke ngIf-direktivet. Dette vil hoppe over alle oddetall og bare vise tall som er partall:

   <div *ngFor='la element av tall; la jevn = jevn'>
   <p *ngHvis='til og med'> Dette er et gjentatt avsnitt: {{item}} </s>
   </div>

Hvordan telle bakover

For å telle bakover kan du bruke tradisjonelle metoder som å snu en liste eller telle bakover gjennom løkken ved å bruke en indeks.

1. Deklarer en indeksvariabel i ngFor-setningen. Innenfor ngFor, start fra lengden på arrayet og trekk fra antall elementer du allerede har gått gjennom:

   <div *ngFor="la element av tall; la i = indeks;">
   <s> Dette er et gjentatt avsnitt: {{numbers.length-i-1}} </s>
   </div>

2. Du kan også lage en omvendt liste i TypeScript-filen:

   eksport klasseEksempelKlasseredskaperOnInit{
    tall: Array<Antall> = [];
    reversedList: Array<Antall> = [];
   konstruktør() {
   dette.numbers = Array(10).fylle(1).map((x, i)=>i);
   dette.reversedList = dette.numbers.slice().reverse();
    }
   }

3. Iterer over den omvendte listen ved å bruke ngFor:

   <div *ngFor='la element av reversedList; la i = indeks'>
   <s> Dette er et gjentatt avsnitt: {{item}} </s>
   </div>

Hvordan style det første og siste elementet forskjellig

Du kan style det første og det siste elementet separat fra de andre elementene ved å bruke først og siste Vinkelvariabler. Dette er et alternativ til bruker CSS psuedo-klasser som :første barn.

1. I ngFor-setningen erklærer du den første og siste variabelen. Bruk ngClass-direktivet til å tilordne de blå og røde CSS-klassene i de foregående trinnene. Tilordne den blå CSS-klassen til det første elementet, og den røde CSS-klassen til det siste elementet:

   <div *ngFor='la element av tall; la først = først; la vare = sist' [ngClass]= "{blå: først, rød: sist}">
   <s> Dette er et gjentatt avsnitt: {{item}} </s>
   </div>

Hvordan bruke en ngFor til å iterere over objekter

Du kan bruke ngFor-direktivet til å gå gjennom objekter og få tilgang til deres individuelle variabler.

1. Lag en liste over objekter i TypeScript-filen. I dette tilfellet vil det være en liste over personer med detaljene deres:

   eksport klasseEksempelKlasseredskaperOnInit{
    mennesker = []; 
   konstruktør() {
   dette.people = [
    { fornavn: 'John', etternavn: 'Smith', yrke: 'personalsjef', startdato: ny dato("2019-02-05") },
    { fornavn: 'Mary', etternavn: 'Johnson', yrke: 'Teknisk offiser', startdato: ny dato("2016-01-07") },
    { fornavn: 'William', etternavn: 'brun', yrke: 'HR-ansvarlig', startdato: ny dato("2018-03-03") },
    ];
    }
   }

2. I HTML-en bruker du ngFor-løkken for å gå gjennom listen over personer. Hver person vil være tilgjengelig ved å bruke person variabel. Du kan bruke personvariabelen for å få tilgang til attributtene til hver person:

   <div *ngFor='la person av mennesker; la i = indeks'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <s> {{person.occupation}} </s>
   <s> {{person.startDate}} </s>
   </div>

Hvordan bruke en Nested ngFor til å vise objekter inne i andre objekter

Du kan bruke en nestet for-løkke for å vise objekter inne i andre objekter.

1. Endre listen over personer. Hver person vil ha en nødliste med kontakter. Lagre hver nødkontakt som et separat objekt:

   dette.people = [
    {
    fornavn: 'John',
    etternavn: 'Smith',
    nødkontakter: [
    { Navn: 'Amanda Smith', forhold: 'Kone', telefon: '0441239876' },
    { Navn: 'Barry Smith', forhold: 'Sønn', telefon: '0442239876'}
    ]
    },
    {
    fornavn: 'Mary',
    etternavn: 'Johnson',
    nødkontakter: [
    { Navn: 'Mark Johnson', forhold: 'Ektemann', telefon: '0443239876' }
    ]
    },
    ];

2. Lag en nestet løkke i den opprinnelige sløyfen i HTML-koden for å gå gjennom hver nødkontakt og vise detaljene deres:

   <div *ngFor='la person av mennesker; la i = indeks'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='la kontakt med person.nødkontakt; la j = indeks'>
   <h5> Nødkontakter: </h5>
   <s> {{kontakt navn}} </s>
   <s> {{person.relationship}} </s>
   <s> {{person.phone}} </s>
   </div>
   <br>
   </div>

Looping Bruke ngFor i Angular

Du kan bruke ngFor-strukturdirektivet til å gå dynamisk gjennom HTML-elementer på nettstedet ditt. Dette vil tillate deg å gjenta den samme blokken for et antall objekter, eller et spesifisert antall ganger.

Du kan også bruke den til å gjøre andre triks som å hoppe over alle partall eller oddetall eller style det første og siste elementet. Du kan også bruke den til å dynamisk gjengi mange objekter i andre objekter.

Det er andre Angular-direktiver du kan bruke for å gjøre nettstedet ditt mer dynamisk. Disse inkluderer ngIf, ngSwitch, ngStyle, ngClass og ngModel.