For-konstruksjonen i Angular

Loop gjennom elementene i en array kan også kjøres ved hjelp av konstruksjonen @for.

La oss prøve i praksis. La oss igjen si at i vår komponent finnes en array:

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

La oss se på syntaksen til konstruksjonen:

@for () {
	tagger
}

La oss spesifisere arrayen som skal itereres over og variabelen som elementene skal plasseres i:

@for (elem of arr) {
	tagger
}

Dette er imidlertid ikke alt. For at Angular skal fungere korrekt må vi spesifisere en spesiell kommando track. Etter denne må vi spesifisere en unik verdi for hvert element i arrayen. Dette er nødvendig for at Angular skal kunne arbeide mer optimalt med DOM. La oss bruke indeksen til elementet i arrayen som en slik unik verdi. For å gjøre dette må vi spesifisere variabelen $index. Så, her er vår endelige kode:

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

Det er gitt en array:

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

Skriv ut hvert element i denne arrayen i en egen avsnitt.