Konstruksi for dalam Angular

Gelung melalui elemen array juga boleh dilaksanakan dengan konstruksi @for.

Mari cuba dalam praktik. Katakan dalam komponen kita terdapat array:

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

Pertimbangkan sintaksis konstruksi:

@for () {
	tag
}

Tentukan array yang akan dilalui dan pembolehubah, yang mana elemen akan dimasukkan ke dalamnya:

@for (elem of arr) {
	tag
}

Walau bagaimanapun, ini belum semuanya. Untuk kerja yang betul Angular, kita mesti menentukan perintah khas track. Selepasnya, kita mesti menentukan nilai unik untuk setiap elemen array. Ini diperlukan supaya Angular boleh bekerja dengan DOM dengan lebih optimum. Mari kita gunakan nombor elemen array sebagai nilai unik tersebut. Untuk ini, kita mesti menentukan pembolehubah $index. Jadi, berikut adalah kod terakhir kami:

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

Diberi array:

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

Paparkan setiap elemen array ini dalam perenggan berasingan.