Reactive Loops ใน Angular

Reactivity ยังจะทำงานในลูป ngFor ได้อีกด้วย นั่นหมายความว่าเมื่ออาร์เรย์ มีการเปลี่ยนแปลง การเปลี่ยนแปลงเหล่านั้นจะแสดงผล บนหน้าจอทันที

ลองมาทดลองปฏิบัติกัน สมมติว่าเรามี อาร์เรย์ดังต่อไปนี้:

export class AppComponent {
	public arr: string[] = ['a', 'b', 'c', 'd'];
}

มาแสดงอาร์เรย์ของเราในลูปในรูปแบบรายการ:

<ul>
	<li *ngFor="let elem of arr">
		{{ elem }}
	</li>
</ul>

สร้างปุ่ม เมื่อคลิกที่ปุ่มนั้นจะ เรียกใช้เมธอดของคลาส:

<button (click)="add()">
	add
</button>

ในเมธอดนี้ เราจะเปลี่ยนแปลงอาร์เรย์ของเรา เช่น เพิ่มองค์ประกอบใหม่เข้าไป:

export class AppComponent {
	public text: string = '';
	
	public add(): void {
		this.arr.push('!');
	}
}

ตอนนี้ หากรันโค้ดและกดที่ ปุ่ม หลังจากกดทันทีในรายการ ก็จะปรากฏองค์ประกอบใหม่ขึ้นมา

กำหนดให้มีอาร์เรย์ แสดงองค์ประกอบของมันในลูป สร้างปุ่ม เมื่อกดที่ปุ่มนั้น องค์ประกอบสุดท้ายของอาร์เรย์จะถูกลบออก