Hoe de ngFor Angular-richtlijn te gebruiken?

Angular gebruikt richtlijnen om bepaalde HTML-elementen op uw website dynamisch weer te geven. Een van de structurele richtlijnen die u kunt gebruiken, is ngFor.

Met de ngFor-richtlijn kunt u hetzelfde blok een bepaald aantal keren herhalen of door een reeks objecten lopen om hun details weer te geven. Het is een krachtig hulpmiddel dat u zelfs kunt gebruiken om objecten in andere objecten weer te geven.

Het heeft ook veel functies die handig kunnen zijn in specifieke scenario's. Dit omvat het vinden van de eerste en laatste elementen of het overslaan van bepaalde items.

Hoe ngFor te gebruiken om statische getallen door te lopen

De ngFor-richtlijn is gebaseerd op de for-lus, een van veel handige loops die JavaScript ondersteunt. Vanaf de huidige versie van Angular (14), moet u een array maken met het aantal items dat u wilt doorlopen.

1. U kunt een lijst maken binnen de ngFor-instructie zelf. De volgende code herhaalt een alinea vijf keer, met behulp van indexen 0 tot 4:

   <div *ngFor='laat item van [0, 1, 2, 3, 4]; laat ik = index'>
   <p> Dit is een herhaalde alinea: {{item}} </p>
   </div>

2. Aangezien de bovenstaande methode mogelijk niet geschikt is voor grote arrays, kunt u ook dynamisch een array maken in het TypeScript-bestand:

   exporteren klasVoorbeeldKlasseimplementeertOnInit{
    nummers: Array<nummer> = [];
   constructeur() {
   // Hiermee wordt dynamisch de volgende array gemaakt:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   deze.getallen = Array(10).vullen(1).map((x, ik)=>i);
    }
   }

3. U kunt dan door de getallenreeks in de HTML lopen:

   <div *ngFor='laat item van nummers; laat ik = index'>
   <p>Dit is een herhaalde alinea: {{item}}</p>
   </div>

Bepaalde nummers overslaan of stijlen

U kunt de oneven of ook al ngVoor variabelen om elk tweede getal te bepalen. Een scenario waarin u dit misschien handig vindt, is als u elke oneven of even rij in een tabel wilt opmaken met een andere kleur.

1. Voeg in het CSS-bestand voor een component enkele nieuwe CSS-klassen toe. Dit zijn de stijlen die u voor bepaalde elementen op even of oneven indexen zult gebruiken:

   .rood {
    kleur rood;
   }
   .blauw { 
    kleur blauw; 
   }
   

2. Declareer oneven en even variabelen binnen de ngFor-instructie. Dit zijn variabelen die Angular zal herkennen. Wijs de rode CSS-klasse toe aan even getallen en de blauwe CSS-klasse aan oneven getallen:

   <div *ngFor='laat item van nummers; laat oneven = oneven; laat even = even' [ngClass]="{rood: even, blauw: oneven}">
   <p> Dit is een herhaalde alinea: {{item}} </p>
   </div>

3. Voer uw Angular-website uit met ng serveren en open het in de webbrowser. Even en oneven HTML-elementen wisselen tussen de verschillende stijlen op basis van hun CSS-klasse:
4. Als u elk even getal volledig wilt overslaan, kunt u de ngIf-richtlijn gebruiken. Hiermee worden alle oneven getallen overgeslagen en worden alleen getallen weergegeven die even zijn:

   <div *ngFor='laat item van nummers; laat even = even'>
   <p *ngIf='ook al'> Dit is een herhaalde alinea: {{item}} </p>
   </div>

Hoe achteruit te tellen

Om achteruit te tellen, kunt u traditionele methoden gebruiken, zoals het omkeren van een lijst of terugtellen door de lus met behulp van een index.

1. Declareer een indexvariabele in de ngFor-instructie. Begin binnen de ngFor met de lengte van de array en trek het aantal items af dat u al hebt doorlopen:

   <div *ngFor="laat item van nummers; laat ik = index;">
   <p> Dit is een herhaalde alinea: {{numbers.length-i-1}} </p>
   </div>

2. U kunt ook een omgekeerde lijst maken in het TypeScript-bestand:

   exporteren klasVoorbeeldKlasseimplementeertOnInit{
    nummers: Array<nummer> = [];
    reversedList: Array<nummer> = [];
   constructeur() {
   deze.getallen = Array(10).vullen(1).map((x, ik)=>i);
   deze.reversedList = deze.nummers.slice().reverse();
    }
   }

3. Herhaal de omgekeerde lijst met behulp van de ngFor:

   <div *ngFor='laat item van reversedList; laat ik = index'>
   <p> Dit is een herhaalde alinea: {{item}} </p>
   </div>

Hoe het eerste en laatste element anders te stylen?

U kunt de eerste en laatste elementen afzonderlijk van de andere elementen opmaken met de eerst en laatst Hoekvariabelen. Dit is een alternatief voor CSS psuedo-klassen gebruiken Leuk vinden :eerstgeborene.

1. Declareer in de ngFor-instructie de eerste en laatste variabelen. Gebruik de ngClass-richtlijn om de blauwe en rode CSS-klassen in de vorige stappen toe te wijzen. Wijs de blauwe CSS-klasse toe aan het eerste element en de rode CSS-klasse aan het laatste element:

   <div *ngFor='laat item van nummers; laat eerst = eerst; laat duren = laatste' [ngClass]= "{blauw: eerste, rood: laatste}">
   <p> Dit is een herhaalde alinea: {{item}} </p>
   </div>

Een ngFor gebruiken om objecten te herhalen

U kunt de ngFor-richtlijn gebruiken om door objecten te bladeren en toegang te krijgen tot hun individuele variabelen.

1. Maak een lijst met objecten in het TypeScript-bestand. In dit geval is er een lijst met mensen met hun gegevens:

   exporteren klasVoorbeeldKlasseimplementeertOnInit{
    mensen = []; 
   constructeur() {
   deze.mensen = [
    { Voornaam: 'John', achternaam: 'Smit', bezigheid: 'HR Manager', startdatum: nieuwe datum("2019-02-05") },
    { Voornaam: 'Maria', achternaam: 'Johnson', bezigheid: 'Technisch Officier', startdatum: nieuwe datum("2016-01-07") },
    { Voornaam: 'Willem', achternaam: 'Bruin', bezigheid: 'HR Officer', startdatum: nieuwe datum("2018-03-03") },
    ];
    }
   }

2. Gebruik in de HTML de ngFor-lus om door de lijst met personen te bladeren. Elke persoon is toegankelijk via de persoon variabel. U kunt de persoonsvariabele gebruiken om toegang te krijgen tot de kenmerken van elke persoon:

   <div *ngFor='laat persoon van mensen; laat ik = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{persoon.beroep}} </p>
   <p> {{persoon.startDatum}} </p>
   </div>

Een geneste ngFor gebruiken om objecten in andere objecten weer te geven

U kunt een geneste for-lus gebruiken om objecten binnen andere objecten weer te geven.

1. Pas de lijst met personen aan. Elke persoon heeft een noodlijst met contacten. Bewaar elk noodcontact als een apart object:

   deze.mensen = [
    {
    Voornaam: 'John',
    achternaam: 'Smit',
    contactpersonen voor noodgevallen: [
    { naam: 'Amanda Smith', relatie: 'Vrouw', telefoon: '0441239876' },
    { naam: 'Barry Smith', relatie: 'Zoon', telefoon: '0442239876'}
    ]
    },
    {
    Voornaam: 'Maria',
    achternaam: 'Johnson',
    contactpersonen voor noodgevallen: [
    { naam: 'Mark Johnson', relatie: 'Echtgenoot', telefoon: '0443239876' }
    ]
    },
    ];

2. Maak in de HTML een geneste lus in uw originele lus om door elk contact voor noodgevallen te lopen en hun details weer te geven:

   <div *ngFor='laat persoon van mensen; laat ik = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='laat contact persoon.emergencyContacts; laat j = index'>
   <h5> Contactpersonen voor noodgevallen: </h5>
   <p> {{contactnaam}} </p>
   <p> {{persoon.relatie}} </p>
   <p> {{persoon.telefoon}} </p>
   </div>
   <br>
   </div>

Looping met ngFor in Angular

U kunt de structurele richtlijn ngFor gebruiken om dynamisch door HTML-elementen op uw website te lopen. Hiermee kunt u hetzelfde blok herhalen voor een aantal objecten, of voor een bepaald aantal keren.

Je kunt het ook gebruiken om andere trucs uit te voeren, zoals het overslaan van elk even of oneven getal of het stylen van het eerste en laatste element. U kunt het ook gebruiken om veel objecten binnen andere objecten dynamisch weer te geven.

Er zijn andere Angular-richtlijnen die u kunt gebruiken om uw website dynamischer te maken. Deze omvatten ngIf, ngSwitch, ngStyle, ngClass en ngModel.