Cấu trúc for trong Angular

Vòng lặp qua các phần tử của mảng cũng có thể được khởi chạy bằng cấu trúc @for.

Hãy thử thực hành. Giả sử lại trong component của chúng ta có một mảng:

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

Hãy xem xét cú pháp của cấu trúc:

@for () {
	các thẻ
}

Hãy chỉ định mảng cần lặp và biến, mà các phần tử sẽ được gán vào:

@for (elem of arr) {
	các thẻ
}

Tuy nhiên, điều này vẫn chưa đủ. Để hoạt động chính xác, Angular yêu cầu chúng ta chỉ định lệnh đặc biệt track. Sau đó, chúng ta phải chỉ định một giá trị duy nhất cho mỗi phần tử của mảng. Điều này cần thiết để Angular có thể làm việc với DOM một cách tối ưu hơn. Hãy lấy chỉ số của phần tử mảng làm giá trị duy nhất đó. Để làm điều này, chúng ta phải chỉ định biến $index. Vậy, đây là mã cuối cùng của chúng ta:

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

Cho mảng:

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

Hãy hiển thị từng phần tử của mảng này trong một đoạn văn riêng biệt.