Angular ရှိ for ဖွဲ့စည်းပုံ

Array ၏အစုအဝေးများကို loop ပတ်ရန် @for ဖွဲ့စည်းပုံကိုလည်း အသုံးပြုနိုင်ပါသည်။

လက်တွေ့စမ်းကြည့်ကြရအောင်။ ကျွန်ုပ်တို့၏ component တွင် array တစ်ခုရှိတယ်ဆိုပါစို့။

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

ဖွဲ့စည်းပုံ၏ syntax ကို ကြည့်ရှုကြပါစို့။

@for () {
	တဂ်များ
}

လှည့်ပတ်မည့် array နှင့် အစုအဝေးများထဲဝင်ရောက်မည့် variable ကို သတ်မှတ်ကြပါစို့။

@for (elem of arr) {
	တဂ်များ
}

သို့သော် ဤသည်မှာ အားလုံးမဟုတ်သေးပါ။ Angular အားကောင်းစွာအလုပ်လုပ်စေရန် ကျွန်ုပ်တို့သည် အထူး command တစ်ခုဖြစ်သော track ကို သတ်မှတ်ရမည်။ ၎င်းနောက် array ၏ အစုအဝေးတစ်ခုစီအတွက် ထူးခြားသော တန်ဖိုးတစ်ခုကို သတ်မှတ်ရမည်။ ၎င်းသည် DOM နှင့် ပိုမိုထိရောက်စွာအလုပ်လုပ်စေရန် Angular အတွက် လိုအပ်ပါသည်။ ထိုထူးခြားသောတန်ဖိုးအဖြစ် array element ၏နံပါတ်ကို ယူကြပါစို့။ ထိုသို့ပြုလုပ်ရန် ကျွန်ုပ်တို့သည် $index variable ကို သတ်မှတ်ရမည်။ ထို့ကြောင့် ကျွန်ုပ်တို့၏ နောက်ဆုံးကုဒ်မှာ-

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

Array တစ်ခုပေးထားသည်။

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

ထို array ၏ element တစ်ခုစီကို သီးခြား paragraph တစ်ခုစီတွင် ထုတ်ပြပါ။