Cicli con @for
Visualizzi liste con @for e le espressioni track.
Cicli con @for è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Cicli con for
Il blocco @for ripete il contenuto per ogni elemento di una raccolta. Sostituisce la vecchia direttiva *ngFor e richiede un'espressione track.
Sintassi di base di for
Scriva il simbolo @, la parola for, quindi item of items e una clausola track obbligatoria che indichi una chiave univoca.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }Perché track è obbligatorio
L'espressione track indica ad Angular come identificare ogni elemento tra una modifica e l'altra, così può riutilizzare i nodi DOM invece di ricrearli. Questo migliora notevolmente le prestazioni.
Tracciare per identità
Se gli elementi non hanno un id stabile, ad esempio nel caso di un elenco di stringhe primitive, può tracciare direttamente l'elemento.
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }Il blocco empty
Un blocco @empty viene renderizzato quando la raccolta non contiene elementi. Segue la parentesi graffa di chiusura del blocco @for.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }Variabili contestuali
All'interno di un blocco @for sono disponibili variabili utili, tra cui index, count, first, last, even e odd. Le acquisisca con let.
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }La variabile index
Il valore dollar-index indica la posizione dell'elemento corrente a partire da zero; spesso viene assegnato a una variabile locale come mostrato sopra.
first e last
I valori booleani dollar-first e dollar-last sono true rispettivamente per il primo e l'ultimo elemento, e sono utili per gli stili o i separatori.
even e odd
I valori booleani dollar-even e dollar-odd aiutano ad applicare stili alternati alle righe.
Iterare su un signal
La raccolta può provenire da un signal: è sufficiente chiamarlo nell'espressione for.
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }Vantaggio in termini di prestazioni
Poiché track è obbligatorio, il nuovo @for è più veloce di *ngFor senza trackBy, perché Angular sa sempre come associare gli elementi ai nodi DOM.
Verifica rapida: cicli
Il requisito del blocco for.
Riepilogo: cicli
Ha imparato a usare il blocco @for con la sua espressione track obbligatoria, il blocco @empty per le raccolte vuote e variabili contestuali come index, first, last, even e odd. Sostituisce *ngFor. Prossimo argomento: lo switch con @switch.
Domande Frequenti
La lezione «Cicli con @for» è gratuita?
Sì — il testo completo di «Cicli con @for» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Cicli con @for»?
Visualizzi liste con @for e le espressioni track. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Cicli con @for»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.