Chỉ mục lặp của vòng lặp trong Angular

Khi lặp qua *ngFor và @for, bạn có thể nhận được không chỉ các phần tử của mảng, mà còn cả số thứ tự của chúng. Hãy xem cách thực hiện điều này. Giả sử trong thành phần chính của chúng ta có một mảng:

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

Hãy hiển thị cả các phần tử của nó lẫn số thứ tự.

Đối với chỉ thị *ngFor, để làm điều này sử dụng một thủ thuật đặc biệt:

<ul>
	<li *ngFor="let el of arr; let i = index">
		{{ i }}
		{{ el }}
	</li>
</ul>

Còn đối với cấu trúc @for, bạn có thể đơn giản lấy và sử dụng biến này bên trong vòng lặp:

<ul>
	@for (el of arr; track $index) {
		<li>
			{{ $index }}
			{{ el }}
		</li>
	}
</ul>

Cho mảng:

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

Hãy hiển thị số thứ tự của nó, nhưng sao cho chúng bắt đầu từ một, chứ không phải từ không.