For-konstruktion i Angular

Loop gennem elementer i et array kan også køres ved hjælp af konstruktionen @for.

Lad os prøve det i praksis. Antag, at der igen i vores komponent er et array:

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

Lad os se på syntaksen for konstruktionen:

@for () {
	tags
}

Lad os angive arrayet, der skal itereres over, og variablen, som elementerne vil blive placeret i:

@for (elem of arr) {
	tags
}

Dette er dog ikke alt. For at Angular skal fungere korrekt skal vi angive en speciel kommando track. Efter den skal vi angive en unik værdi for hvert element i arrayet. Dette er nødvendigt, så Angular kan arbejde mere optimalt med DOM. Lad os som en sådan unik værdi tage elementets indeks i arrayet. For at gøre dette skal vi angive variablen $index. Så, her er vores endelige kode:

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

Givet arrayet:

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

Udskriv hvert element i dette array i en separat afsnit.