Angular 18の@forやtrackのテンプレート制御構文について解説

@forについて

古いバージョンでは、ngForを使って、テンプレート側でループ処理していましたが、Angular17から@forが新規に使えるようになりました。

以下のように、@forを使ってループ処理を使えます。

<ul>
@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
}
</ul>

また、@forでは、trackの指定が必須になっています。
trackには、id等の一意になるような値を入れることを推奨しており、これを設定すると、
レンダリングのパフォーマンスが向上するそうです。

コンポーネント側は以下のようなデータを入れてます。

  items = [
    {id: 1, name: "taro"},
    {id: 2, name: "jiro"},
    {id: 3, name: "akira"},
    {id: 4, name: "yuta"},
  ]

@forではtrackの指定は必須なため、
連想配列でない、単純なリストの場合には、以下のようにforループの値をそのまま入れることで動きます。

<ul>
@for (item of items; track item) {
  <li>{{ item }}</li>
}
</ul>

ですが、一意なキーをtrackに指定することを、公式が推奨しているため、
大量データ等でレンダリングが遅いものに関しては、一意なキーをちゃんと設定した方がよさそうです。

@forループ処理で、リストが空の場合にのみ処理を実行したいものがあれば、@empty構文が以下のように使えます。

<ul>
@for (item of items; track item) {
  <li>{{ item }}</li>
} @empty {
  <li>空です</li>
}
</ul>