Angular의 반응형 루프

반응성은 ngFor 루프에서도 작동합니다. 이는 배열이 변경되면 그 변경 사항이 화면에 즉시 반영된다는 의미입니다.

실제로 해보겠습니다. 다음과 같은 배열이 있다고 가정해 보겠습니다:

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

배열을 목록 형태로 루프에서 출력해 보겠습니다:

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

클릭하면 클래스의 메서드를 호출하는 버튼을 만들어 보겠습니다:

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

이 메서드에서 배열을 변경해 보겠습니다. 예를 들어, 새 요소를 추가해 보겠습니다:

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

이제 코드를 실행하고 버튼을 누르면 버튼을 누른 직후 목록에 새 요소가 표시됩니다.

배열이 주어졌습니다. 루프에서 배열 요소를 출력하세요. 누르면 배열에서 마지막 요소를 제거하는 버튼을 만드세요.