Obtener índice actual en ngFor

Cuando almacenamos datos en un array, una lista de empleados, podemos usar la función *ngFor para convertir estos datos en un formato tabular en una página web.

Cuando indexamos en *ngFor, nos ayuda a numerar la lista de elementos en un array, lo que facilita el seguimiento de los elementos de la lista, especialmente cuando se trata de una amplia gama de elementos enumerados.

Por ejemplo, estamos tratando con una lista de cursos, por lo que en app.component.ts, crearemos la lista en un array y la llamaremos cursos.

Debemos tener en cuenta el nombre que le damos a nuestro arreglo porque de ahí usaremos el *ngFor para obtener el índice, usando la i-variable.

En app.component.ts, ingresaremos lo siguiente:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  courses = [
    { id:1, name:'course1' },
    { id:2, name:'course2' },
    { id:3, name:'course3' }
  ];
}

Cuando mire la matriz, verá que se llama cursos, como explicamos inicialmente.

El siguiente paso es ir a app.component.html para pasar la función *ngFor, que será responsable de permitir que el array se indexe.

Aquí pasaremos algunas instrucciones:

<ul>
  <li *ngFor="let course of courses; index as i">
      {{ i }} - {{ course.name }}
  </li>
</ul>

Enlace de muestra de salida