Chu trình phản ứng trong Angular

Tính phản ứng cũng sẽ hoạt động trong vòng lặp ngFor. Điều này có nghĩa là khi mảng thay đổi, những thay đổi đó sẽ lập tức được phản ánh trên màn hình.

Hãy thử nghiệm trong thực tế. Giả sử chúng ta có mảng sau:

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

Hãy hiển thị mảng của chúng ta trong một vòng lặp dưới dạng danh sách:

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

Tạo một nút bấm, khi nhấp vào sẽ gọi phương thức của lớp:

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

Trong phương thức này, chúng ta sẽ thay đổi mảng của mình theo một cách nào đó, ví dụ, thêm một phần tử mới vào nó:

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

Bây giờ, nếu chạy mã và nhấn vào nút, thì ngay sau khi nhấn, một phần tử mới sẽ xuất hiện trong danh sách.

Cho một mảng. Hiển thị các phần tử của nó trong một vòng lặp. Tạo một nút bấm, khi nhấn vào sẽ xóa phần tử cuối cùng khỏi mảng.