Читать книгу Angular - Ferdinand Malcher - Страница 151

Hilfsvariablen für ngFor

ngFor stellt eine Reihe von Hilfsvariablen zur Verfügung, die wir beim Durchlaufen der Liste verwenden können. Sie beziehen sich jeweils auf das aktuelle Element:

 index: Index des aktuellen Elements 0...n

 first: true, wenn es das erste Element der Liste ist

 last: true, wenn es das letzte Element der Liste ist

 even: true, wenn der Index gerade ist

 odd: true, wenn der Index ungerade ist

Diese Flags können wir dazu verwenden, um z. B. eine gestreifte Tabelle zu erzeugen oder nach jedem außer dem letzten Element ein Komma auszugeben. Die Variablen müssen vor der Verwendung jeweils auf lokale Variablen gemappt werden, z. B. index as i.

Das folgende Beispiel verwendet index, um vor jedem Namen eine fortlaufende Ziffer anzuzeigen. Die lokale Variable i wird vor der Anzeige jeweils um 1 erhöht, weil die Index-Zählung natürlich bei 0 beginnt.

<ul>

<li *ngFor="let name of names; index as i">

{{ i + 1 }}. {{ name }}

</li>

</ul>