Die for-konstruksie in Angular

Jy kan ook deur 'n array se elemente iterer deur van die @for-konstruksie gebruik te maak.

Kom ons probeer dit in die praktyk. Gestel ons het weer 'n array in ons komponent:

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

Laat ons die konstruksie se sintaksis bekyk:

@for () {
	tags
}

Laat ons die array wat deurgegaan moet word en die veranderlike wat elke element sal ontvang, spesifiseer:

@for (elem of arr) {
	tags
}

Dit is egter nie alles nie. Vir korrekte werking moet ons 'n spesiale track-instruksie aan Angular verskaf. Hierna moet ons 'n unieke waarde vir elke element van die array spesifiseer. Dit is nodig sodat Angular meer optimaal met die DOM kan werk. Kom ons neem die element se indeks as hierdie unieke waarde. Om dit te doen, moet ons die $index-veranderlike gebruik. Dus, hier is ons finale kode:

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

Gegee die volgende array:

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

Vertoon elke element van hierdie array in 'n apartie paragraaf.