Angular의 for 디렉티브

다음과 같은 배열이 있다고 가정해 봅시다:

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

템플릿 파일에서 반복문을 사용하여 이 배열을 순회해 보겠습니다. 이를 위해 *ngFor 디렉티브가 사용됩니다. 이 디렉티브는 배열을 순회하며 각 요소를 별도의 태그로 출력할 수 있습니다.

먼저 이 디렉티브를 가져와야 합니다:

import {NgFor} from "@angular/common";

그리고 데코레이터의 imports 섹션에 추가합니다:

@Component({
	.....
	imports: [....., NgFor],
	....
})

이제 사용할 수 있습니다. 어떻게 하는지 살펴보겠습니다. ul 목록이 있다고 가정합니다:

<ul>
	
</ul>

우리 배열이 반복문으로 순회되며 각 요소가 li 태그 안에 출력되도록 만들어 봅시다. 다음과 같이 할 수 있습니다:

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

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

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

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

이전 문제를 수정하여 단락에 배열 요소의 제곱값이 출력되도록 하세요.