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];
}

この配列の各要素を別々の段落に出力してください。