Índices de iterações de loop no Angular
Ao iterar com *ngFor e @for
você pode obter não apenas os elementos do array,
mas também seus números. Vamos ver como isso
é feito. Suponha que temos um array no componente principal:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Vamos exibir tanto seus elementos quanto seus números.
Para a diretiva *ngFor, para isso
é usado um truque especial:
<ul>
<li *ngFor="let el of arr; let i = index">
{{ i }}
{{ el }}
</li>
</ul>
E para a construção @for você pode simplesmente
usar essa variável dentro
do loop:
<ul>
@for (el of arr; track $index) {
<li>
{{ $index }}
{{ el }}
</li>
}
</ul>
Dado o array:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Exiba seus números, mas de forma que eles comecem com um, e não com zero.
