Muundo wa for katika Angular

Kitanzi cha vipengele vya safu pia kinaweza kuzindushwa kwa kutumia muundo @for.

Tujaribu kwa vitendo. Hebu tuseme tena katika kijenzi chetu kuna safu:

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

Tuchunguze sintaksia ya muundo:

@for () {
	vitambulisho
}

Hebu tuelezee safu inayopitwa na kutofautisha, ambayo vipengele vitangukia:

@for (elem of arr) {
	vitambulisho
}

Hata hivyo, hii haijakamilika. Kwa ajili ya kufanya kazi kwa usahihi kwa Angular tunapaswa kuelezea amri maalum track. Baada yake tunapaswa kuelezea thamani ya kipekee kwa kila kipengele cha safu. Hii inahitajika, kwa ajili ya Angular kuweza kufanya kazi kwa ufanisi zaidi na DOM. Hebu tuchukue nambari ya kipengele cha safu kama thamani ya kipekee kama hiyo. Kwa kufanya hivyo tunapaswa kuelezea kutofautisha $index. Kwa hivyo, huu ndio msimbo wetu wa mwisho:

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

Imewekwa safu:

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

Onyesha kila kipengele cha safu hii kwenye aya tofauti.