Struktura for në Angular

Loop përmes elementeve të vargut gjithashtu mund të niset me ndihmën e strukturës @for.

Le ta provojmë në praktikë. Le të themi përsëri se në komponentin tonë ekziston një varg:

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

Le të shqyrtojmë sintaksën e strukturës:

@for () {
	etiketat
}

Le të përcaktojmë vargun që do të përsëritet dhe variablën ku do të vendosen elementët:

@for (elem of arr) {
	etiketat
}

Megjithatë, kjo nuk është ende e gjitha. For funksionimit korrekt të Angular, ne duhet të përcaktojmë një komandë të veçantë track. Pas saj duhet të përcaktojmë një vlerë unike për çdo element të vargut. Kjo është e nevojshme që Angular të jetë në gjendje të punojë në mënyrë më optimale me DOM. Le të marrim numrin e elementit të vargut si një vlerë të tillë unike. Për këtë duhet të përcaktojmë variablën $index. Pra, këtu është kodi ynë përfundimtar:

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

Është dhënë vargu:

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

Shfaqni çdo element të këtij vargu në një paragraf të veçantë.