Angular-এ for কনস্ট্রাকশন

একটি অ্যারের উপাদানগুলির মাধ্যমে লুপ চালানো যেতে পারে @for কনস্ট্রাকশন ব্যবহার করেও।

আসুন অনুশীলনে চেষ্টা করি। আবার ধরুন আমাদের কম্পোনেন্টে একটি অ্যারে রয়েছে:

export class AppComponent {
	public arr: number[] = [1, 2, 3, 4, 5];
}

কনস্ট্রাকশনের সিনট্যাক্স বিবেচনা করা যাক:

@for () {
	ট্যাগগুলি
}

যে অ্যারেটি পুনরাবৃত্তি করতে হবে এবং সেই ভেরিয়েবলটি নির্দিষ্ট করি, যার মধ্যে উপাদানগুলি আসবে:

@for (elem of arr) {
	ট্যাগগুলি
}

যাইহোক, এটিই সব নয়। সঠিকভাবে কাজ করার জন্য Angular-এর আমাদের একটি বিশেষ কমান্ড নির্দিষ্ট করতে হবে track। এর পরে আমাদের অবশ্যই প্রতিটি অ্যারের উপাদানের জন্য একটি অনন্য মান নির্দিষ্ট করতে হবে। DOM-এর সাথে আরও অনুকূলভাবে কাজ করতে Angular-এর জন্য এটি প্রয়োজন। আসুন এমন একটি অনন্য মান হিসাবে নিই অ্যারের উপাদানটির সংখ্যা। এর জন্য আমাদের নির্দিষ্ট করতে হবে $index ভেরিয়েবলটি। তাহলে, এখানে আমাদের চূড়ান্ত কোড রয়েছে:

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

একটি অ্যারে দেওয়া হয়েছে:

export class AppComponent {
	public arr: numbers[] = [1, 2, 3, 4, 5];
}

এই অ্যারের প্রতিটি উপাদান আলাদা অনুচ্ছেদে আউটপুট করুন।