Angular-da for konstruksiyasi

Massiv elementlari bo'yicha tsiklni @for konstruksiyasi yordamida ham ishga tushirish mumkin.

Amaliyotda sinab ko'ramiz. Komponentimizda yana massiv mavjud bo'lsin:

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

Konstruksiya sintaksisini ko'rib chiqamiz:

@for () {
	teglar
}

Takrorlanadigan massivni va uning elementlari qo'yiladigan o'zgaruvchini ko'rsatamiz:

@for (elem of arr) {
	teglar
}

Biroq, bu hali hammasi emas. Angularning to'g'ri ishlashi uchun biz maxsus track buyrug'ini ko'rsatishimiz kerak. Undan keyin biz massivning har bir elementi uchun qandaydir noyob qiymatni ko'rsatishimiz kerak. Bu Angular DOM bilan yanada samarali ishlashi uchun zarur. Keling, bunday noyob qiymat sifatida massiv elementining raqamini olamiz. Buning uchun $index o'zgaruvchisini ko'rsatishimiz kerak. Shunday qilib, mana bizning yakuniy kodimiz:

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

Massiv berilgan:

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

Ushbu massivning har bir elementini alohida abzatsda chiqaring.