Índices de iteraciones de bucles en Angular
Al iterar con *ngFor y @for
se pueden obtener no solo los elementos del array,
sino también sus números. Veamos cómo se hace esto.
Supongamos que tenemos un array en el componente principal:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Mostremos tanto sus elementos como sus números.
Para la directiva *ngFor, se utiliza
un truco especial para esto:
<ul>
<li *ngFor="let el of arr; let i = index">
{{ i }}
{{ el }}
</li>
</ul>
Y para la construcción @for, simplemente se puede
usar esta variable dentro del bucle:
<ul>
@for (el of arr; track $index) {
<li>
{{ $index }}
{{ el }}
</li>
}
</ul>
Dado el array:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Muestre sus números, pero de manera que comiencen desde uno, no desde cero.
