Angular में लूप इटरेशन इंडेक्स

*ngFor और @for के माध्यम से पुनरावृत्ति करते समय, न केवल ऐरे के तत्वों को प्राप्त किया जा सकता है, बल्कि उनके क्रमांक (index) भी प्राप्त किए जा सकते हैं। आइए देखें, यह कैसे किया जाता है। मान लीजिए कि हमारे मुख्य घटक में एक ऐरे है:

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