Aktuellen Index in ngFor abrufen

Wenn wir Daten in einem Array speichern, einer Liste von Mitarbeitern, können wir die Funktion *ngFor verwenden, um diese Daten in ein Tabellenformat auf einer Webseite umzuwandeln.

Wenn wir in *ngFor indizieren, hilft es uns, die Liste der Elemente in einem Array zu nummerieren, was es einfacher macht, die Elemente auf der Liste zu verfolgen, insbesondere wenn es sich um eine große Auswahl an aufgelisteten Elementen handelt.

Zum Beispiel haben wir es mit einer Liste von Kursen zu tun, also erstellen wir in app.component.ts die Liste in einem Array und nennen sie courses.

Wir sollten auf den Namen achten, den wir unserem Array geben, denn von diesem verwenden wir das *ngFor, um den Index zu erhalten, indem wir die i-variable verwenden.

In app.component.ts geben wir Folgendes ein:

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

Wenn Sie sich das Array ansehen, werden Sie sehen, dass es courses heißt, wie wir eingangs erklärt haben.

Als nächstes müssen Sie in die app.component.html gehen, um die Funktion *ngFor zu übergeben, die dafür verantwortlich ist, dass das Array indiziert wird.

Hier werden wir einige Anweisungen weitergeben:

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

Ausgabebeispiel-Link