Angular'da for Yapısı

Dizi elemanları üzerinde döngü, @for yapısı kullanılarak da çalıştırılabilir.

Pratikte deneyelim. Yine bileşenimizde bir dizi olduğunu varsayalım:

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

Yapının sözdizimini inceleyelim:

@for () {
	etiketler
}

Üzerinde döngü yapılacak diziyi ve elemanların atanacağı değişkeni belirtelim:

@for (elem of arr) {
	etiketler
}

Ancak bu henüz bitmedi. Angular'ın doğru çalışması için özel bir track komutu belirtmeliyiz. Ondan sonra, her dizi elemanı için bir tane benzersiz bir değer belirtmeliyiz. Bu, Angular'ın DOM ile daha optimize bir şekilde çalışabilmesi için gereklidir. Bu benzersiz değer olarak dizi elemanının numarasını kullanalım. Bunun için $index değişkenini belirtmeliyiz. İşte, son kodumuz:

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

Aşağıdaki dizi verilmiştir:

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

Bu dizinin her elemanını ayrı bir paragrafta yazdırın.