Die for-Anweisung in Angular

Eine Schleife über die Elemente eines Arrays kann auch mit der Konstruktion @for gestartet werden.

Probieren wir es praktisch aus. Angenommen, in unserer Komponente gibt es wieder ein Array:

export class AppComponent {
	public arr: number[] = [1, 2, 3, 4, 5];
}

Betrachten wir die Syntax der Konstruktion:

@for () {
	Tags
}

Geben wir das zu durchlaufende Array und die Variable an, in die die Elemente gelangen sollen:

@for (elem of arr) {
	Tags
}

Das ist jedoch noch nicht alles. Für die korrekte Funktion von Angular müssen wir einen speziellen Befehl track angeben. Danach müssen wir einen eindeutigen Wert für jedes Element des Arrays angeben. Dies ist notwendig, damit Angular optimaler mit dem DOM arbeiten kann. Nehmen wir als solchen eindeutigen Wert die Indexnummer des Array-Elements. Dazu müssen wir die Variable $index angeben. Also, hier ist unser endgültiger Code:

@for (elem of arr; track $index) {
	<div>
		{{ elem }}
	</div>
}

Gegeben ist ein Array:

export class AppComponent {
	public arr: numbers[] = [1, 2, 3, 4, 5];
}

Geben Sie jedes Element dieses Arrays in einem separaten Absatz aus.