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
Ottimizzazione dei block template in Angular 17
Gestire undefined e partial nelle reactive forms di Angular
Configurare policy CORS in Azure Container Apps
Creare alias per tipi generici e tuple in C#
Miglioramenti agli screen reader e al contrasto in Angular
Reactive form tipizzati con modellazione del FormBuilder in Angular
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Aggiungere interattività lato server in Blazor 8
Installare le Web App site extension tramite una pipeline di Azure DevOps
Generare file PDF da Blazor WebAssembly con iText
Eseguire operazioni con timeout in React
Come migrare da una form non tipizzata a una form tipizzata in Angular
I più letti di oggi
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- .NET Conference Italia 2023 - Milano e Online
- Ottimizzazione dei block template in Angular 17
- Definire stili a livello di libreria in Angular