For-constructie in Angular

Loop door array-elementen kan ook gestart worden met de constructie @for.

Laten we het in de praktijk proberen. Stel dat we opnieuw in ons component een array hebben:

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

Laten we de syntaxis van de constructie bekijken:

@for () {
	tags
}

Laten we de te doorlopen array en de variabele specificeren, waarin de elementen zullen terechtkomen:

@for (elem of arr) {
	tags
}

Dit is echter nog niet alles. Voor correct werk van Angular moeten we een speciale opdracht track specificeren. Daarna moeten we een unieke waarde opgeven voor elk element van de array. Dit is nodig, zodat Angular optimaal kan werken met de DOM. Laten we als zodanig unieke waarde het array-elementnummer nemen. Hiervoor moeten we de variabele $index opgeven. Dus, hier is onze uiteindelijke code:

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

Gegeven een array:

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

Geef elk element van deze array weer in een aparte alinea.