Obtenir l'index actuel dans ngFor

Lorsque nous stockons des données dans un tableau, une liste d’employés, nous pouvons utiliser la fonction *ngFor pour convertir ces données dans un format tabulaire sur une page Web.

Lorsque nous indexons dans *ngFor, cela nous aide à numéroter la liste des éléments dans un tableau, ce qui facilite le suivi des éléments de la liste, en particulier lorsqu’il s’agit d’une longue gamme d’éléments répertoriés.

Par exemple, on a affaire à une liste de cours, donc dans le app.component.ts, on va créer la liste dans un tableau et la nommer courses.

Nous devons faire attention au nom que nous donnons à notre tableau car c’est à partir de celui-ci que nous utiliserons le *ngFor pour obtenir l’index, en utilisant la i-variable.

Dans app.component.ts, nous allons saisir ce qui suit :

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' }
  ];
}

Lorsque vous regardez le tableau, vous verrez qu’il s’appelle courses, comme nous l’avons expliqué initialement.

Ensuite, allez dans app.component.html pour passer la fonction *ngFor, qui sera chargée de laisser le tableau devenir indexé.

Ici, nous allons passer quelques instructions :

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

Lien d’échantillon de sortie