Angular における for 構文

配列要素のループは、 @for 構文を使用して実行することもできます。

実際に試してみましょう。再び、コンポーネントに配列があるとします：

app/app.component.tsexport class AppComponent {
  public arr: number[] = [1, 2, 3, 4, 5];
}

構文を確認しましょう：

app/app.component.html@for () {
  タグ
}

ループする配列と、要素が格納される変数を指定します：

app/app.component.html@for (elem of arr) {
  タグ
}

しかし、これですべてではありません。Angular を正しく動作させるためには、特別なコマンド track を指定する必要があります。この後に、配列の各要素に対する一意の値を指定する必要があります。これは、Angular が DOM をより最適に操作できるようにするために必要です。この一意の値として、配列要素のインデックス番号を使ってみましょう。そのためには、変数 $index を指定する必要があります。では、最終的なコードは次のようになります：

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

app/app.component.tsexport class AppComponent {
  public arr: numbers[] = [1, 2, 3, 4, 5];
}