For konstrukcija u Angularu

Petlju po elementima niza takođe možemo pokrenuti koristeći konstrukciju @for.

Isprobajmo u praksi. Neka ponovo u našem komponentu postoji niz:

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

Pogledajmo sintaksu konstrukcije:

@for () {
	tagovi
}

Navedimo niz koji se iterira i promenljivu u koju će upadati elementi:

@for (elem of arr) {
	tagovi
}

Ovo, međutim, još nije sve. Za ispravan rad Angulara moramo da navedemo specijalnu komandu track. Nakon nje moramo navesti neku jedinstvenu vrednost za svaki element niza. Ovo je potrebno kako bi Angular mogao optimalnije da radi sa DOM-om. Hajde da kao takvu jedinstvenu vrednost uzmemo broj elementa niza. Za ovo moramo navesti promenljivu $index. Dakle, evo našeg konačnog koda:

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

Dat je niz:

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

Prikažite svaki element ovog niza u zasebnom pasusu.