Hur man använder ngFor Angular-direktivet

Angular använder direktiv för att dynamiskt återge vissa HTML-element på din webbplats. Ett av de strukturella direktiven du kan använda är ngFor.

ngFor-direktivet låter dig upprepa samma block ett visst antal gånger, eller gå igenom en rad objekt för att visa deras detaljer. Det är ett kraftfullt verktyg som du till och med kan använda för att rendera objekt i andra objekt.

Den har också många funktioner som kan vara användbara i specifika scenarier. Detta inkluderar att hitta de första och sista elementen eller hoppa över vissa objekt.

Hur man använder ngFor för att gå igenom statiska siffror

ngFor-direktivet är baserat på for-slingan, en av många användbara loopar som JavaScript stöder. Från och med den nuvarande versionen av Angular (14) måste du skapa en array som har det antal objekt du vill gå igenom.

1. Du kan skapa en lista inom själva ngFor-satsen. Följande kod upprepar ett stycke fem gånger med index 0 till 4:

   <div *ngFor='låt objekt av [0, 1, 2, 3, 4]; låt i = index'>
   <sid> Detta är ett upprepat stycke: {{item}} </s>
   </div>

2. Eftersom metoden ovan kanske inte är lämplig för stora arrayer, kan du också dynamiskt skapa en array i TypeScript-filen:

   exportera klassExempelKlassredskapOnInit{
    siffror: Array<siffra> = [];
   konstruktör() {
   // Detta kommer dynamiskt att skapa följande array:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   detta.numbers = Array(10).fylla(1).map((x, i)=>i);
    }
   }

3. Du kan sedan gå igenom siffrorna i HTML: en:

   <div *ngFor='låt post av nummer; låt i = index'>
   <sid>Detta är ett upprepat stycke: {{item}}</s>
   </div>

Hur man hoppar över eller stilar vissa nummer

Du kan använda udda eller även ngFör variabler för att bestämma vartannat tal. Ett scenario där du kan tycka att detta är användbart är om du vill styla varje udda eller jämn rad i en tabell med en annan färg.

1. Lägg till några nya CSS-klasser i CSS-filen för en komponent. Det här är stilarna du kommer att använda för vissa element vid jämna eller udda index:

   .röd {
    färgen röd;
   }
   .blå { 
    färgen blå; 
   }
   

2. Deklarera udda och jämna variabler i ngFor-satsen. Dessa är variabler som Angular kommer att känna igen. Tilldela den röda CSS-klassen till jämna tal och den blå CSS-klassen till udda nummer:

   <div *ngFor='låt post av nummer; låt udda = udda; låt jämna = jämna' [ngClass]="{röd: jämn, blå: udda}">
   <sid> Detta är ett upprepat stycke: {{item}} </s>
   </div>

3. Kör din Angular-webbplats med ng tjäna och öppna den i webbläsaren. Jämna och udda HTML-element kommer att alternera mellan de olika stilarna baserat på deras CSS-klass:
4. Om du vill hoppa över alla jämna tal helt kan du använda ngIf-direktivet. Detta kommer att hoppa över alla udda nummer och endast visa nummer som är jämna:

   <div *ngFor='låt post av nummer; låt jämna = jämna'>
   <p *ngIf='även'> Detta är ett upprepat stycke: {{item}} </s>
   </div>

Hur man räknar bakåt

För att räkna bakåt kan du använda traditionella metoder som att vända en lista eller räkna bakåt genom loopen med hjälp av ett index.

1. Deklarera en indexvariabel i ngFor-satsen. Inom ngFor, börja från längden på arrayen och dra av antalet objekt som du redan har gått igenom:

   <div *ngFor="låt post av nummer; låt i = index;">
   <sid> Detta är ett upprepat stycke: {{numbers.length-i-1}} </s>
   </div>

2. Du kan också skapa en omvänd lista i TypeScript-filen:

   exportera klassExempelKlassredskapOnInit{
    siffror: Array<siffra> = [];
    reversedList: Array<siffra> = [];
   konstruktör() {
   detta.numbers = Array(10).fylla(1).map((x, i)=>i);
   detta.reversedList = detta.numbers.slice().reverse();
    }
   }

3. Iterera över den omvända listan med hjälp av ngFor:

   <div *ngFor='låt objekt av reversedList; låt i = index'>
   <sid> Detta är ett upprepat stycke: {{item}} </s>
   </div>

Hur man utformar det första och sista elementet på olika sätt

Du kan styla de första och sista elementen separat från de andra elementen med hjälp av först och sista Vinkelvariabler. Detta är ett alternativ till använder CSS psuedo-klasser tycka om :förstfödde.

1. Deklarera de första och sista variablerna i ngFor-satsen. Använd ngClass-direktivet för att tilldela de blå och röda CSS-klasserna i de föregående stegen. Tilldela den blå CSS-klassen till det första elementet och den röda CSS-klassen till det sista elementet:

   <div *ngFor='låt post av nummer; låt först = först; låt sist = sist' [ngClass]= "{blå: först, röd: sist}">
   <sid> Detta är ett upprepat stycke: {{item}} </s>
   </div>

Hur man använder en ngFor för att iterera över objekt

Du kan använda ngFor-direktivet för att gå igenom objekt och komma åt deras individuella variabler.

1. Skapa en lista med objekt i TypeScript-filen. I det här fallet kommer det att finnas en lista över personer med deras uppgifter:

   exportera klassExempelKlassredskapOnInit{
    människor = []; 
   konstruktör() {
   detta.people = [
    { förnamn: 'John', efternamn: 'Smed', ockupation: 'HR-chef', startdatum: nytt datum("2019-02-05") },
    { förnamn: 'Mary', efternamn: 'Johnson', ockupation: 'Teknisk officer', startdatum: nytt datum("2016-01-07") },
    { förnamn: 'William', efternamn: 'Brun', ockupation: 'HR Officer', startdatum: nytt datum("2018-03-03") },
    ];
    }
   }

2. I HTML-koden använder du ngFor-loopen för att gå igenom listan med personer. Varje person kommer att vara tillgänglig med hjälp av person variabel. Du kan använda personvariabeln för att komma åt attributen för varje person:

   <div *ngFor='låt person av människor; låt i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <sid> {{person.occupation}} </s>
   <sid> {{person.startDate}} </s>
   </div>

Hur man använder en kapslad ngFor för att visa objekt inuti andra objekt

Du kan använda en kapslad för-loop för att visa objekt inuti andra objekt.

1. Ändra listan över personer. Varje person kommer att ha en nödlista med kontakter. Lagra varje nödkontakt som ett separat objekt:

   detta.people = [
    {
    förnamn: 'John',
    efternamn: 'Smed',
    nödkontakter: [
    { namn: 'Amanda Smith', förhållande: 'Fru', telefon: '0441239876' },
    { namn: 'Barry Smith', förhållande: 'Son', telefon: '0442239876'}
    ]
    },
    {
    förnamn: 'Mary',
    efternamn: 'Johnson',
    nödkontakter: [
    { namn: 'Mark Johnson', förhållande: 'Make', telefon: '0443239876' }
    ]
    },
    ];

2. Skapa en kapslad loop i din ursprungliga loop i HTML-koden för att gå igenom varje nödkontakt och visa deras detaljer:

   <div *ngFor='låt person av människor; låt i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='låt kontakta person.nödkontakter; låt j = index'>
   <h5> Nödkontakter: </h5>
   <sid> {{Kontaktnamn}} </s>
   <sid> {{person.relationship}} </s>
   <sid> {{person.phone}} </s>
   </div>
   <br>
   </div>

Looping Använder ngFor i Angular

Du kan använda strukturdirektivet ngFor för att dynamiskt gå igenom HTML-element på din webbplats. Detta gör att du kan upprepa samma block för ett antal objekt eller ett visst antal gånger.

Du kan också använda den för att göra andra trick som att hoppa över alla jämna eller udda tal eller styla det första och sista elementet. Du kan också använda den för att dynamiskt rendera många objekt i andra objekt.

Det finns andra Angular-direktiv som du kan använda för att göra din webbplats mer dynamisk. Dessa inkluderar ngIf, ngSwitch, ngStyle, ngClass och ngModel.