Angular-da for gurluşy

Massiw elementleriniň üstünden aýlamagy şeýle hem @for gurluşy arkaly işletmek mümkin.

Amaly işde synap göreli. Geliň, yene-de biziň komponentimizde massiw bardyr:

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

Gurluşyň sintaksisine serediň:

@for () {
	tegler
}

Aýlanýan massiw we elementleriň düşjek üýtgeýjisini görkezeliň:

@for (elem of arr) {
	tegler
}

Emma bu, henizem hemmesi däl. Angular-iň dogry işlemegi üçin biziň ýörite buýruk track görkezmeli. Ondan soň biz her bir massiw elementi üçin käbir takyklykly bahany görkezmeli. Bu, Angular-iň DOM bilen has gönümel işleýşi üçin zerur. Geliň, şeýle takyklykly baha hökmünde massiw elementiniň tertip belgisini alalyň. Bunuň üçin biz $index üýtgeýjisini görkezmeli. Şeýlelik bilen, bu biziň soňky kodymyz:

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

Massiw berlen:

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

Bu massiwdäki her bir elementi aýratyn abzasda görkeziň.