for კონსტრუქცია Angular-ში

ელემენტების მასივზე ციკლის გასაშვებად ასევე შეგიძლიათ გამოიყენოთ @for კონსტრუქცია.

შევეცადოთ პრაქტიკაში. დავუშვათ, რომ ჩვენს კომპონენტში ისევ არის მასივი:

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

განვიხილოთ კონსტრუქციის სინტაქსი:

@for () {
	ტეგები
}

მივუთითოთ განმეორებადი მასივი და ცვლადი, სადაც მოხვდება ელემენტები:

@for (elem of arr) {
	ტეგები
}

თუმცა, ეს ჯერ კიდევ ყველაფერი არ არის. Angular-ის კორექტული მუშაობისთვის ჩვენ უნდა მივუთითოთ სპეციალური ბრძანება track. მის შემდეგ ჩვენ უნდა მივუთითოთ რაიმე უნიკალური მნიშვნელობა მასივის თითოეული ელემენტისთვის. ეს აუცილებელია იმისთვის, რომ Angular-მა შეძლოს DOM-თან უფრო ოპტიმალურად მუშაობა. მოდით, ამ უნიკალურ მნიშვნელობად ავიღოთ მასივის ელემენტის ნომერი. ამისთვის ჩვენ უნდა მივუთითოთ ცვლადი $index. ასე რომ, აქ არის ჩვენი საბოლოო კოდი:

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

მოცემულია მასივი:

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

გამოიტანეთ ამ მასივის თითოეული ელემენტი ცალკე აბზაცში.