Angular-এ লুপ ইটারেশন ইনডেক্স

*ngFor এবং @for এর মাধ্যমে ইটারেট করার সময়, শুধুমাত্র অ্যারের উপাদানই নয়, তাদের সূচক নম্বরও পাওয়া যায়। আসুন দেখি, এটা কিভাবে করা হয়। ধরা যাক আমাদের মেইন কম্পোনেন্টে একটি অ্যারে আছে:

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

আসুন এর উপাদানগুলি এবং তাদের সূচক নম্বরগুলি আউটপুট করি।

*ngFor ডাইরেক্টিভের জন্য এটা করতে একটি বিশেষ পদ্ধতি ব্যবহার করা হয়:

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

আর @for কনস্ট্রাকশনের জন্য শুধু লুপের ভিতরে এই ভেরিয়েবলটি ব্যবহার করা যায়:

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'];
}