Ottenere l'indice dell'elemento corrente con la drettiva ngFor di Angular

di Stefano Mostarda, in HTML5, Angular,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi