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। এর পরে আমাদের অবশ্যই প্রতিটি অ্যারের উপাদানের জন্য একটি অনন্য মান নির্দিষ্ট করতে হবে। DOM-এর সাথে আরও অনুকূলভাবে কাজ করতে Angular-এর জন্য এটি প্রয়োজন। আসুন এমন একটি অনন্য মান হিসাবে নিই অ্যারের উপাদানটির সংখ্যা। এর জন্য আমাদের নির্দিষ্ট করতে হবে $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];
}