Kitaran Reaktif dalam Angular

Kereaktifan juga akan berfungsi dalam kitaran ngFor. Ini bermakna bahawa apabila perubahan pada tatasusunan berlaku, perubahan tersebut akan serta-merta dipaparkan pada skrin.

Mari kita cuba dalam praktik. Katakan kita mempunyai tatasusunan berikut:

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

Mari keluarkan tatasusunan kami dalam kitaran sebagai senarai:

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

Mari buat butang, yang apabila diklik akan memanggil kaedah kelas:

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

Dalam kaedah ini, kita akan mengubah tatasusunan kami, contohnya, menambah elemen baru ke dalamnya:

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

Sekarang, jika anda menjalankan kod dan menekan butang, elemen baru akan muncul dalam senarai sejurus selepas menekan.

Diberi satu tatasusunan. Keluarkan elemen-elemennya dalam kitaran. Buat butang, yang apabila ditekan, elemen terakhir akan dipadam dari tatasusunan.