Sådan bruges ngFor Angular-direktivet

Angular bruger direktiver til dynamisk at gengive visse HTML-elementer på din hjemmeside. Et af de strukturelle direktiver, du kan bruge, er ngFor.

ngFor-direktivet giver dig mulighed for at gentage den samme blok et specificeret antal gange eller sløjfe gennem en række objekter for at vise deres detaljer. Det er et kraftfuldt værktøj, som du endda kan bruge til at gengive objekter i andre objekter.

Den har også mange funktioner, der kan være nyttige i specifikke scenarier. Dette inkluderer at finde det første og det sidste element eller springe visse elementer over.

Sådan bruger du ngFor til at sløjfe gennem statiske tal

ngFor-direktivet er baseret på for-løkken, en af mange nyttige loops, som JavaScript understøtter. Fra den nuværende version af Angular (14) bliver du nødt til at oprette et array, der har det antal elementer, du vil gå igennem.

1. Du kan oprette en liste i selve ngFor-sætningen. Følgende kode gentager et afsnit fem gange ved hjælp af indeks 0 til 4:

   <div *ngFor='lad emne på [0, 1, 2, 3, 4]; lad i = indeks'>
   <s> Dette er et gentaget afsnit: {{item}} </s>
   </div>

2. Da ovenstående metode muligvis ikke er egnet til store arrays, kan du også dynamisk oprette en array i TypeScript-filen:

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

3. Du kan derefter gå gennem tal-arrayet i HTML:

   <div *ngFor='lad element af numre; lad i = indeks'>
   <s>Dette er et gentaget afsnit: {{item}}</s>
   </div>

Sådan springer du over eller stiler visse numre

Du kan bruge ulige eller også selvom ngFor variabler til at bestemme hvert andet tal. Et scenarie, hvor du måske finder dette nyttigt, er, hvis du vil style hver ulige eller lige række i en tabel ved hjælp af en anden farve.

1. Tilføj nogle nye CSS-klasser i CSS-filen for en komponent. Dette er de stilarter, du vil bruge til visse elementer ved lige eller ulige indekser:

   .rød {
    farve: rød;
   }
   .blå { 
    farve: blå; 
   }
   

2. Erklær ulige og lige variable i ngFor-sætningen. Disse er variabler, som Angular vil genkende. Tildel den røde CSS-klasse til lige tal og den blå CSS-klasse til ulige tal:

   <div *ngFor='lad element af numre; lad ulige = ulige; lade lige = lige' [ngClass]="{rød: lige, blå: ulige}">
   <s> Dette er et gentaget afsnit: {{item}} </s>
   </div>

3. Kør dit Angular-websted vha ng tjene og åbn den i webbrowseren. Lige og ulige HTML-elementer vil veksle mellem de forskellige stilarter baseret på deres CSS-klasse:
4. Hvis du vil springe hvert lige tal helt over, kan du bruge ngIf-direktivet. Dette vil springe alle ulige tal over og kun vise tal, der er lige:

   <div *ngFor='lad element af numre; lade lige = lige'>
   <p *ngHvis='også selvom'> Dette er et gentaget afsnit: {{item}} </s>
   </div>

Hvordan man tæller bagud

For at tælle baglæns kan du bruge traditionelle metoder, såsom at vende en liste eller tælle tilbage gennem løkken ved hjælp af et indeks.

1. Deklarer en indeksvariabel i ngFor-sætningen. Inden for ngFor, start fra længden af ​​arrayet og træk antallet af elementer, du allerede har sløjfet igennem:

   <div *ngFor="lad element af numre; lad i = indeks;">
   <s> Dette er et gentaget afsnit: {{numbers.length-i-1}} </s>
   </div>

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

   eksport klasseEksempelKlasseredskaberOnInit{
    tal: Array<nummer> = [];
    reversedList: Array<nummer> = [];
   konstruktør() {
   dette.numbers = Array(10).fylde(1).map((x, i)=>i);
   dette.reversedList = dette.numbers.slice().reverse();
    }
   }

3. Gentag over den omvendte liste ved hjælp af ngFor:

   <div *ngFor='lad element af reversedList; lad i = indeks'>
   <s> Dette er et gentaget afsnit: {{item}} </s>
   </div>

Sådan styles det første og sidste element forskelligt

Du kan style det første og det sidste element adskilt fra de andre elementer ved hjælp af først og sidst Vinkelvariable. Dette er et alternativ til ved hjælp af CSS psuedo-klasser synes godt om :første barn.

1. I ngFor-sætningen skal du deklarere den første og den sidste variabel. Brug ngClass-direktivet til at tildele de blå og røde CSS-klasser i de foregående trin. Tildel den blå CSS-klasse til det første element, og den røde CSS-klasse til det sidste element:

   <div *ngFor='lad element af numre; lad først = først; lad vare = sidste' [ngClass]= "{blå: først, rød: sidst}">
   <s> Dette er et gentaget afsnit: {{item}} </s>
   </div>

Sådan bruger du en ngFor til at iterere over objekter

Du kan bruge ngFor-direktivet til at gå gennem objekter og få adgang til deres individuelle variabler.

1. Opret en liste over objekter i TypeScript-filen. I dette tilfælde vil der være en liste over personer med deres detaljer:

   eksport klasseEksempelKlasseredskaberOnInit{
    mennesker = []; 
   konstruktør() {
   dette.people = [
    { fornavn: 'John', efternavn: 'Smith', beskæftigelse: 'HR Manager', startdato: ny dato("2019-02-05") },
    { fornavn: 'Mary', efternavn: 'Johnson', beskæftigelse: 'Teknisk officer', startdato: ny dato("2016-01-07") },
    { fornavn: 'William', efternavn: 'Brun', beskæftigelse: 'HR Officer', startdato: ny dato("2018-03-03") },
    ];
    }
   }

2. I HTML'en skal du bruge ngFor-løkken til at gå gennem listen over personer. Hver person vil være tilgængelig ved hjælp af person variabel. Du kan bruge personvariablen til at få adgang til hver persons egenskaber:

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

Sådan bruges en indlejret ngFor til at vise objekter inde i andre objekter

Du kan bruge en indlejret for-løkke til at vise objekter inde i andre objekter.

1. Rediger listen over personer. Hver person vil have en nødliste over kontakter. Gem hver nødkontakt som et separat objekt:

   dette.people = [
    {
    fornavn: 'John',
    efternavn: 'Smith',
    nødkontakter: [
    { navn: 'Amanda Smith', forhold: 'Kone', telefon: '0441239876' },
    { navn: 'Barry Smith', forhold: 'Søn', telefon: '0442239876'}
    ]
    },
    {
    fornavn: 'Mary',
    efternavn: 'Johnson',
    nødkontakter: [
    { navn: 'Mark Johnson', forhold: 'Ægtemand', telefon: '0443239876' }
    ]
    },
    ];

2. I HTML'en skal du oprette en indlejret løkke inde i din oprindelige løkke for at gå gennem hver nødkontakt og vise deres detaljer:

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

Looping Brug af ngFor i Angular

Du kan bruge ngFor-strukturdirektivet til dynamisk at gå gennem HTML-elementer på dit websted. Dette giver dig mulighed for at gentage den samme blok for et antal objekter eller et bestemt antal gange.

Du kan også bruge den til at lave andre tricks, såsom at springe hvert lige eller ulige tal over eller style det første og sidste element. Du kan også bruge den til dynamisk at gengive mange objekter i andre objekter.

Der er andre Angular-direktiver, som du kan bruge til at gøre dit websted mere dynamisk. Disse inkluderer ngIf, ngSwitch, ngStyle, ngClass og ngModel.