Konstrukcja for w Angularze

Pętlę po elementach tablicy można również uruchomić za pomocą konstrukcji @for.

Wypróbujmy w praktyce. Niech ponownie w naszym komponencie będzie tablica:

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

Przyjrzyjmy się składowi konstrukcji:

@for () {
	tagi
}

Wskażmy przeglądaną tablicę i zmienną, do której będą trafiać elementy:

@for (elem of arr) {
	tagi
}

To jednak jeszcze nie wszystko. Dla poprawnej pracy Angulara musimy wskazać specjalną komendę track. Po niej musimy wskazać pewną unikalną wartość dla każdego elementu tablicy. Jest to potrzebne, aby Angular mógł bardziej optymalnie pracować z DOM. Weźmy jako taką unikalną wartość numer elementu tablicy. W tym celu musimy wskazać zmienną $index. A więc, oto nasz ostateczny kod:

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

Dana tablica:

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

Wyświetl każdy element tej tablicy w osobnym akapicie.