For konstruktsioon Angularis

Massiivi elementide läbimiseks saab kasutada ka konstruktsiooni @for.

Proovime seda praktikas. Oletame, et meie komponendis on jällegi massiiv:

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

Vaatame konstruktsiooni süntaksit:

@for () {
	sildid
}

Määrame läbitava massiivi ja muutuja, millesse elemendid satuvad:

@for (elem of arr) {
	sildid
}

See siiski pole veel kõik. Angulari korrektseks tööks peame määrama spetsiaalse käsu track. Pärast seda peame määrama mingi unikaalse väärtuse iga massiivi elemendi jaoks. Seda on vaja selleks, et Angular saaks DOM-iga töötada optimeeritumalt. Võtame sellise unikaalse väärtusena massiivi elemendi numbri. Selleks peame määrama muutuja $index. Niisiis, siin on meie lõplik kood:

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

Antud massiiv:

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

Kuvage iga selle massiivi element eraldi lõigus.