Angular-da for konstruksiyası

Massiv elementləri üzrə dövrü @for konstruksiyası ilə də işə sala bilərsiniz.

Gəlin praktikada sınayaq. Tutaq ki, bizim komponentimizdə yenə massiv var:

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

Konstruksiyanın sintaksisinə baxaq:

@for () {
	teqlər
}

Gəlin üzərindən keçiləcək massivi və elementlərin daxil olacağı dəyişəni göstərək:

@for (elem of arr) {
	teqlər
}

Ancaq bu, hələlik hamısı deyil. Angular-in düzgün işləməsi üçün biz xüsusi track əmrini göstərməliyik. Ondan sonra biz hər bir massiv elementi üçün birtəhər unikal dəyər göstərməliyik. Bu, Angular-in DOM ilə daha optimal işləyə bilməsi üçün lazımdır. Gəlin belə unikal dəyər kimi massiv elementinin nömrəsini götürək. Bunun üçün biz $index dəyişənini göstərməliyik. Beləliklə, burada bizim yekun kodumuzdur:

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

Massiv verilmişdir:

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

Bu massivin hər bir elementini ayrıca abzasda çıxarın.