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
Utilizzare i primary constructor di C# per inizializzare le proprietà
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Miglioramenti agli screen reader e al contrasto in Angular
Evitare il flickering dei componenti nel prerender di Blazor 8
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Monitorare i server on-premises con Azure Arc
Determinare lo stato di un pod in Kubernetes
Aggiungere interattività lato server in Blazor 8
Catturare la telemetria degli eventi di output cache in ASP.NET Core
Utilizzare ChatGPT con Azure OpenAI
Creazione di componenti personalizzati in React.js con Tailwind CSS