Angular တွင် ကွင်းဆက်များ၏ ထပ်လောင်းအညွှန်းများ

*ngFor နှင့် @for ဖြင့် ထပ်လောင်းပြုလုပ်စဉ်၊ array element များကိုသာမက ၎င်းတို့၏ နံပါတ်များကိုပါ ရရှိနိုင်ပါသည်။ ဤသို့မည်ကဲ့သို့လုပ်ဆောင်ရမည်ကို ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့၏ အဓိကကွန်ပြူတာတွင် array တစ်ခုရှိသည်ဆိုပါစို့:

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

၎င်း၏ element များနှင့် နံပါတ်များကို ထုတ်ပြကြပါစို့။

*ngFor directive အတွက် ဤသို့လုပ်ဆောင်ရန် အထူးလှည့်ကွက်တစ်ခုကို အသုံးပြုပါသည်:

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

@for တည်ဆောက်မှုအတွက်မူ ကွင်းဆက်အတွင်း၌ပင် ဤ variable ကို ယူသုံးနိုင်ပါသည်:

app/app.component.html<ul>
  @for (el of arr; track $index) {
    <li>
      {{ $index }}
      {{ el }}
    </li>
  }
</ul>

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