Angular တွင် for ညွှန်ကြားချက်

ကျွန်ုပ်တို့တွင် array တစ်ခုရှိသည်ဆိုပါစို့:

export class AppComponent {
	public arr: string[] = ['a', 'b', 'c', 'd'];
}

Template ဖိုင်ထဲတွင် loop ဖြင့် ဤ array ကို ဖြတ်သန်းကြည့်ရအောင်။ ယင်းအတွက် *ngFor ညွှန်ကြားချက် ရည်ရွယ်ပါသည်။ ၎င်းသည် array ကို ဖြတ်သန်းနိုင်ပြီး ၎င်း၏ အစိတ်အပိုင်းတစ်ခုစီကို သီးခြား tag အတွင်း ထုတ်ပြန်နိုင်ပါသည်။

အစတွင် ဤညွှန်ကြားချက်ကို import လုပ်ရန် လိုအပ်ပါသည်:

import {NgFor} from "@angular/common";

ပြီးလျှင် decorator ရှိ import ကဏ္ဍသို့ ထည့်သွင်းပါ:

@Component({
	.....
	imports: [....., NgFor],
	....
})

ယခု ၎င်းကို အသုံးပြုနိုင်ပါပြီ။ ၎င်းကို မည်သို့လုပ်ဆောင်သည်ကို ကြည့်ရအောင်။ ကျွန်ုပ်တို့တွင် ul စာရင်းတစ်ခု ရှိသည်ဆိုပါစို့:

<ul>

</ul>

ကျွန်ုပ်တို့၏ array ကို loop တွင် ဖြတ်သန်းပြီး ၎င်း၏ အစိတ်အပိုင်းတစ်ခုစီကို li tag များအတွင်း ထုတ်ပြန်ရန် ပြုလုပ်ကြပါစို့။ ယင်းကို အောက်ပါအတိုင်း လုပ်ဆောင်ပါသည်:

<ul>
	<li *ngFor="let el of arr">
		{{ el }}
	</li>
</ul>

Array ကို ပေးထားသည်:

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

ဤ array ၏ အစိတ်အပိုင်းတစ်ခုစီကို သီးခြား စာပိုဒ်တစ်ခုစီတွင် ထုတ်ပြန်ပါ။

ကျွန်ုပ်တို့၏ array ၏ အစိတ်အပိုင်းများ၏ နှစ်ထပ်ကိန်းများကို စာပိုဒ်များအတွင်း ထုတ်ပြန်ရန် ယခင်အလုပ်ကို ပြုပြင်မွမ်းမံပါ။