Angular में for कंस्ट्रक्शन

एरे के एलिमेंट्स के माध्यम से लूप को @for कंस्ट्रक्शन का उपयोग करके भी चलाया जा सकता है।

आइए व्यवहार में कोशिश करते हैं। मान लीजिए कि हमारे कंपोनेंट में फिर से एक एरे है:

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

कंस्ट्रक्शन का सिंटेक्स देखते हैं:

app/app.component.html@for () {
  टैग
}

आइए इटरेट किए जाने वाले एरे और वेरिएबल को निर्दिष्ट करें, जिसमें एलिमेंट्स आएंगे:

app/app.component.html@for (elem of arr) {
  टैग
}

हालाँकि, यह अभी सब कुछ नहीं है। सही ढंग से काम करने के लिए Angular को हमें एक विशेष कमांड track निर्दिष्ट करनी होगी। इसके बाद हमें एरे के प्रत्येक एलिमेंट के लिए एक अद्वितीय मान निर्दिष्ट करना होगा। यह Angular को DOM के साथ अधिक कुशलता से काम करने में सक्षम होने के लिए आवश्यक है। आइए ऐसे अद्वितीय मान के रूप में एरे एलिमेंट की संख्या लें। इसके लिए हमें $index वेरिएबल निर्दिष्ट करनी होगी। तो, यहाँ हमारा अंतिम कोड है:

app/app.component.html@for (elem of arr; track $index) {
  <div>
    {{ elem }}
  </div>
}

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