Сохтари for дар Angular

Ҳалқа бар элементҳои массивро низ метавон бо ёрии сохтар @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];
}

Ҳар як элементи ин массивро дар абзаси ҷудогона чоп кунед.