A for szerkezet az Angular-ban

A tömb elemein történő iteráció elindítható a @for szerkezettel is.

Próbáljuk ki a gyakorlatban. Tegyük fel, hogy a komponensünkben ismét van egy tömb:

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

Nézzük meg a szerkezet szintaxisát:

@for () {
	tagek
}

Adjunk meg egy iterálandó tömböt és egy változót, amibe a tömb elemei kerülnek:

@for (elem of arr) {
	tagek
}

Ez azonban még nem minden. Az Angular helyes működése érdekében meg kell adnunk egy speciális track parancsot. Ez után egy egyedi értéket kell megadnunk minden tömbelemhez. Ez azért szükséges, hogy az Angular optimalizáltabban tudjon dolgozni a DOM-mal. Vegyük ezen egyedi értéknek a tömbelem indexét. Ehhez meg kell adnunk a $index változót. Tehát itt a végső kódunk:

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

Adott egy tömb:

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

Jelenítsd meg a tömb minden elemét egy külön bekezdésben.