Come utilizzare la direttiva angolare ngFor

Angular utilizza le direttive per eseguire il rendering dinamico di determinati elementi HTML sul tuo sito web. Una delle direttive strutturali che puoi usare è ngFor.

La direttiva ngFor ti consente di ripetere lo stesso blocco un numero specificato di volte o di scorrere un array di oggetti per visualizzarne i dettagli. È uno strumento potente che puoi persino utilizzare per eseguire il rendering di oggetti all'interno di altri oggetti.

Ha anche molte funzioni che possono essere utili in scenari specifici. Ciò include trovare il primo e l'ultimo elemento o saltare determinati elementi.

Come usare ngFor per scorrere i numeri statici

La direttiva ngFor si basa sul ciclo for, uno di molti loop utili supportati da JavaScript. A partire dalla versione corrente di Angular (14), dovrai creare un array che abbia il numero di elementi che desideri scorrere.

1. Puoi creare un elenco all'interno dell'istruzione ngFor stessa. Il codice seguente ripeterà un paragrafo cinque volte, utilizzando gli indici da 0 a 4:

   <div *ngFor='lascia l'elemento di [0, 1, 2, 3, 4]; sia io = indice'>
   <p> Questo è un paragrafo ripetuto: {{item}} </p>
   </div>

2. Poiché il metodo sopra potrebbe non essere adatto per array di grandi dimensioni, puoi anche creare dinamicamente un array nel file TypeScript:

   esportare classeEsempioClassimplementaOnInit{
    numeri: Matrice<numero> = [];
   costruttore() {
   // Questo creerà dinamicamente il seguente array:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   questo.numeri = Vettore(10).riempire(1).map((x, i)=>i);
    }
   }

3. È quindi possibile scorrere l'array di numeri nell'HTML:

   <div *ngFor='lasciare l'elemento dei numeri; sia io = indice'>
   <p>Questo è un paragrafo ripetuto: {{item}}</p>
   </div>

Come saltare o dare uno stile a determinati numeri

Puoi usare il strano o anche ngFor variabili per determinare ogni secondo numero. Uno scenario in cui potresti trovarlo utile è se desideri applicare uno stile a ogni riga pari o dispari in una tabella utilizzando un colore diverso.

1. Nel file CSS di un componente, aggiungi alcune nuove classi CSS. Questi sono gli stili che utilizzerai per determinati elementi con indici pari o dispari:

   .rosso {
    colore rosso;
   }
   .blu { 
    colore blu; 
   }
   

2. Dichiara variabili pari e dispari all'interno dell'istruzione ngFor. Queste sono variabili che Angular riconoscerà. Assegna la classe CSS rossa ai numeri pari e la classe CSS blu ai numeri dispari:

   <div *ngFor='lasciare l'elemento dei numeri; let dispari = dispari; lascia pari = pari' [ngClass]="{rosso: pari, blu: dispari}">
   <p> Questo è un paragrafo ripetuto: {{item}} </p>
   </div>

3. Esegui il tuo sito Web Angular utilizzando ng servire e aprilo nel browser web. Gli elementi HTML pari e dispari si alterneranno tra i diversi stili in base alla loro classe CSS:
4. Se vuoi saltare completamente ogni numero pari, puoi usare la direttiva ngIf. Questo salterà tutti i numeri dispari e visualizzerà solo i numeri pari:

   <div *ngFor='lasciare l'elemento dei numeri; lascia pari = pari'>
   <p *ngIf='anche'> Questo è un paragrafo ripetuto: {{item}} </p>
   </div>

Come contare alla rovescia

Per contare all'indietro, puoi utilizzare metodi tradizionali come l'inversione di un elenco o il conteggio all'indietro nel ciclo utilizzando un indice.

1. Dichiara una variabile di indice nell'istruzione ngFor. All'interno di ngFor, inizia dalla lunghezza dell'array e deduci il numero di elementi che hai già eseguito in loop:

   <div *ngFor="lasciare l'elemento dei numeri; sia i = indice;">
   <p> Questo è un paragrafo ripetuto: {{numbers.length-i-1}} </p>
   </div>

2. Puoi anche creare un elenco invertito nel file TypeScript:

   esportare classeEsempioClassimplementaOnInit{
    numeri: Matrice<numero> = [];
    reversedList: Array<numero> = [];
   costruttore() {
   questo.numeri = Vettore(10).riempire(1).map((x, i)=>i);
   questo.lista inversa = questo.numeri.fetta().reverse();
    }
   }

3. Iterare sull'elenco invertito usando ngFor:

   <div *ngFor='let elemento di reversedList; sia io = indice'>
   <p> Questo è un paragrafo ripetuto: {{item}} </p>
   </div>

Come modellare il primo e l'ultimo elemento in modo diverso

Puoi modellare il primo e l'ultimo elemento separatamente dagli altri elementi usando il primo e Ultimo Variabili angolari. Questa è un'alternativa a usando le pseudo-classi CSS piace :Primogenito.

1. Nell'istruzione ngFor, dichiara la prima e l'ultima variabile. Usa la direttiva ngClass per assegnare le classi CSS blu e rosse nei passaggi precedenti. Assegna la classe CSS blu al primo elemento e la classe CSS rossa all'ultimo elemento:

   <div *ngFor='lasciare l'elemento dei numeri; lascia prima = prima; lascia ultimo = ultimo' [ngClass]= "{blu: primo, rosso: ultimo}">
   <p> Questo è un paragrafo ripetuto: {{item}} </p>
   </div>

Come usare un ngFor per scorrere gli oggetti

Puoi usare la direttiva ngFor per scorrere gli oggetti e accedere alle loro singole variabili.

1. Crea un elenco di oggetti nel file TypeScript. In questo caso, ci sarà un elenco di persone con i loro dettagli:

   esportare classeEsempioClassimplementaOnInit{
    persone = []; 
   costruttore() {
   questo.persone = [
    { nome di battesimo: 'John', cognome: 'fabbro', occupazione: 'Manager delle Risorse Umane', data di inizio: nuova data("2019-02-05") },
    { nome di battesimo: 'Maria', cognome: 'Johnson', occupazione: 'Funzionario tecnico', data di inizio: nuova data("2016-01-07") },
    { nome di battesimo: 'William', cognome: 'Marrone', occupazione: 'Funzionario delle risorse umane', data di inizio: nuova data("2018-03-03") },
    ];
    }
   }

2. Nell'HTML, usa il ciclo ngFor per scorrere l'elenco di persone. Ogni persona sarà accessibile utilizzando il persona variabile. Puoi utilizzare la variabile persona per accedere agli attributi di ogni persona:

   <div *ngFor='lasciare persona di persone; sia io = indice'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{person.occupation}} </p>
   <p> {{person.startDate}} </p>
   </div>

Come utilizzare un ngFor annidato per visualizzare oggetti all'interno di altri oggetti

È possibile utilizzare un ciclo for nidificato per visualizzare gli oggetti all'interno di altri oggetti.

1. Modifica l'elenco delle persone. Ogni persona avrà un elenco di contatti di emergenza. Memorizza ogni contatto di emergenza come un oggetto separato:

   questo.persone = [
    {
    nome di battesimo: 'John',
    cognome: 'fabbro',
    contatti di emergenza: [
    { nome: 'Amanda Smith', relazione: 'Moglie', Telefono: '0441239876' },
    { nome: 'Barry Smith', relazione: 'Figlio', Telefono: '0442239876'}
    ]
    },
    {
    nome di battesimo: 'Maria',
    cognome: 'Johnson',
    contatti di emergenza: [
    { nome: 'Marco Johnson', relazione: 'Marito', Telefono: '0443239876' }
    ]
    },
    ];

2. Nell'HTML, crea un loop nidificato all'interno del tuo loop originale per scorrere ogni contatto di emergenza e visualizzarne i dettagli:

   <div *ngFor='lasciare persona di persone; sia io = indice'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='lasciare il contatto di persona.emergencyContacts; sia j = indice'>
   <h5> Contatti di emergenza: </h5>
   <p> {{Nome del contatto}} </p>
   <p> {{person.relation}} </p>
   <p> {{person.phone}} </p>
   </div>
   <fr>
   </div>

Ciclo usando ngFor in Angular

Puoi usare la direttiva strutturale ngFor per scorrere dinamicamente gli elementi HTML sul tuo sito web. Ciò ti consentirà di ripetere lo stesso blocco per un numero di oggetti o per un numero di volte specificato.

Puoi anche usarlo per fare altri trucchi come saltare ogni numero pari o dispari o modellare il primo e l'ultimo elemento. Puoi anche usarlo per eseguire il rendering dinamico di molti oggetti all'interno di altri oggetti.

Ci sono altre direttive Angular che puoi usare per rendere il tuo sito web più dinamico. Questi includono ngIf, ngSwitch, ngStyle, ngClass e ngModel.