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];
}

Бул массивдин ар бир элементин өзүнчө абзацта чыгарыңыз.