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
Le novità di Angular: i miglioramenti alla CLI
Effettuare delete massive con Entity Framework Core 7
Inizializzare i container in Azure Container Apps
Eseguire attività con Azure Container Jobs
Utilizzare la libreria Benchmark.NET per misurare le performance
Specificare il versioning nel path degli URL in ASP.NET Web API
Verificare la provenienza di un commit tramite le GitHub Actions
Sfruttare lo streaming di una chiamata Http da Blazor
Utilizzare Model as a Service su Microsoft Azure
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Evitare la command injection in un workflow di GitHub
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Ottimizzazione dei block template in Angular 17
- Paginare i risultati con QuickGrid in Blazor