โครงสร้าง 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];
}

แสดงแต่ละองค์ประกอบของอาร์เรย์นี้ในย่อหน้าแยกกัน