← Angular コース
7. @for — 配列を繰り返し表示する
配列の要素を順に描画するには @for を使います。@for (item of items; track item.id) { ... } と書くと、配列の要素ごとに中身が繰り返し描画されます。track には各要素を一意に識別できる値(IDなど)を必ず指定します。@empty { ... } を続ければ、配列が空のときの表示も書けます。
実務では商品一覧、コメント一覧、通知リストなど、「配列を画面に並べる」場面の主役です。trackを正しく指定しておくと、配列が更新されたときに変わった行だけが再描画され、パフォーマンスが保たれます。
trackは省略できず、書き忘れるとコンパイルエラーになります。IDがない単純な文字列配列なら track item のように要素自身を指定できますが、オブジェクトの配列では item.id のような一意な値を使いましょう。
サンプルコード(フレームワーク環境が必要なため表示のみ)
import { Component } from '@angular/core';
@Component({
selector: 'app-fruit-list',
// track には要素を一意に識別できる値を指定する
template:
'<ul>' +
' @for (fruit of fruits; track fruit) {' +
' <li>{{ fruit }}</li>' +
' } @empty {' +
' <li>果物がありません</li>' +
' }' +
'</ul>',
})
export class FruitListComponent {
fruits = ['りんご', 'バナナ', 'みかん'];
}