Angular mette a disposizione la direttiva ngFor per ciclare gli elementi di una lista di oggetti in un template HTML. Nella versione base, questa direttiva permette di accedere a un elementeo per volta e di renderizzare un frammento di HTML per ogni elemento.
Tuttavia, esistono casi in cui abbiamo bisogno di accedere non solo all'elemento, ma anche al suo indice all'interno della lista (un tipico esempio è quando vogliamo sapere se l'indice è pari o dispari, o se vogliamo mostrare la posizione a video).
Per recuperare l'indice basta passare una seconda istruzione alla direttiva ngFor come mostrato nel prossimo esempio.
<div *ngFor="let p of products; let i = index">{{i + 1}} - {{p.name}}</div>
L'istruzione let i = index assegna alla variabile i l'indice dell'elemento correntemente ciclato.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestione degli environment per il deploy con un workflow di GitHub
Utilizzare Tailwind CSS all'interno di React: installazione
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Miglioramenti nell'accessibilità con Angular CDK
Definire stili a livello di libreria in Angular
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Miglioramenti nelle performance di Angular 16
Miglioramenti agli screen reader e al contrasto in Angular
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP