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('!');
	}
}

コードを実行してボタンをクリックすると、クリック直後にリストに新しい要素が表示されます。

配列が与えられます。ループ内でその要素を出力してください。クリックすると配列の最後の要素が削除されるボタンを作成してください。