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

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

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}

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

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

app/app.component.tsimport {NgFor} from "@angular/common";

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

app/app.component.ts@Component({
  .....
  imports: [....., NgFor],
  ....
})

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

app/app.component.html<ul>

</ul>

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

app/app.component.html<ul>
  <li *ngFor="let el of arr">
    {{ el }}
  </li>
</ul>

app/app.component.tsexport class AppComponent {
  public arr: number[] = [1, 2, 3, 4, 5];
}