Angular에서의 for 구조

배열 요소를 순회하는 작업은 또한 @for 구조를 사용하여 수행할 수 있습니다.

실제로 시도해 보겠습니다. 우리 컴포넌트에 다시 다음과 같은 배열이 있다고 가정해 보겠습니다:

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

구문 구조를 살펴보겠습니다:

@for () {
	태그들
}

순회할 배열과 요소가 저장될 변수를 지정해 보겠습니다:

@for (elem of arr) {
	태그들
}

하지만 이것이 전부는 아닙니다. Angular가 올바르게 작동하려면 특별한 track 명령을 지정해야 합니다. 이 명령 뒤에는 배열의 각 요소에 대한 고유한 값을 지정해야 합니다. 이는 Angular가 DOM을 더 최적으로 작동할 수 있도록 하기 위함입니다. 이러한 고유 값으로 배열 요소의 인덱스를 사용해 보겠습니다. 이를 위해 $index 변수를 지정해야 합니다. 자, 최종 코드는 다음과 같습니다:

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

다음 배열이 주어졌습니다:

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

이 배열의 각 요소를 별도의 단락에 출력하세요.