Angular даги for конструкцияси

Массив элементлари бўйича циклни @for конструкцияси ёрдамида ҳам ишга тушириш мумкин.

Амалиётда синаб кўрамиз. Яна бизнинг компонентимизда массив мавжуд деб фараз қилайлик:

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

Конструкциянинг синтаксисини кўриб чиқайлик:

@for () {
	теглар
}

Қайтарилаётган массивни ва унга мос элементлар қуйиладиган ўзгарувчини кўрсатамиз:

@for (elem of arr) {
	теглар
}

Бирок, бу ҳаммаси эмас. Angularнинг тўғри ишлаши учун биз махсус track буйругини кўрсатишимиз керак. Ундан сўнг биз массивнинг ҳар бир элементи учун бирор бир уникал қийматни кўрсатишимиз керак. Бу Angular DOM билан яхширок ишлаши учун зарур. Келги, шундай уникал қиймат сифатида массив элементининг рақамини оламиз. Бунинг учун биз $index ўзгарувчисини кўрсатишимиз керак. Демак, бизнинг якуний кодимиз:

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

Массив берилган:

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

Бу массивнинг ҳар бир элементини алоҳида абзацда чиқаринг.