For konstrukcija Angular

Ciklu pa masīva elementiem var arī palaist ar @for konstrukciju.

Izmēģināsim praksē. Lai mūsu komponentē atkal ir masīvs:

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

Apskatīsim konstrukcijas sintaksi:

@for () {
	tagi
}

Norādīsim apstrādājamo masīvu un mainīgo, kurā nonāks elementi:

@for (elem of arr) {
	tagi
}

Tomēr tas vēl nav viss. Lai Angular darbotos korekti, mums jānorāda speciāla komanda track. Pēc tās mums jānorāda kāda unikāla vērtība katram masīva elementam. Tas ir nepieciešams, lai Angular varētu optimālāk strādāt ar DOM. Ņemsim kā šādu unikālo vērtību masīva elementa numuru. Lai to izdarītu, mums jānorāda mainīgais $index. Tātad, šeit ir mūsu galīgais kods:

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

Dots masīvs:

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

Izvadiet katru šī masīva elementu atsevišķā rindkopā.