@forによるループ
@forとtrack式でリストをレンダリングします。
「@forによるループ」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
for によるループ処理
at-for ブロックは、コレクション内の各項目に対してコンテンツを繰り返します。従来の star-ngFor ディレクティブに代わるもので、track 式が必須です。
基本的な for 構文
アット記号、for という語、item of items の順に記述し、続けて一意のキーを指定する必須の track 句を記述します。
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }track が必須である理由
track 式は、変更前後で各項目を識別する方法を Angular に伝えます。これにより、DOM ノードを作り直さずに再利用でき、パフォーマンスが大幅に向上します。
同一性で追跡する
項目に安定した id がない場合（プリミティブな文字列のリストなど）は、項目自体を track の対象にできます。
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }empty ブロック
コレクションに項目がない場合、at-empty ブロックがレンダリングされます。at-for ブロックの閉じ中かっこの後に記述します。
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }コンテキスト変数
at-for ブロック内では、index、count、first、last、even、odd などの便利な変数を使用できます。これらは let で取得します。
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }index 変数
ドル記号付きの index の値は、現在の項目の 0 始まりの位置を示します。上の例のように、ローカル変数に別名を付けて使用することがよくあります。
first と last
ドル記号付きの first と last の boolean 値は、それぞれ先頭と末尾の項目で true になります。スタイル設定や区切り文字の表示に便利です。
even と odd
ドル記号付きの even と odd の boolean 値は、行のスタイルを交互に変えるときに役立ちます。
Signal をループ処理する
コレクションは signal から取得することもできます。for 式内で呼び出すだけです。
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }パフォーマンス上の利点
track が必須であるため、新しい at-for は trackBy を指定しない star-ngFor より高速です。Angular は常に、項目と DOM ノードを対応付ける方法を把握できるためです。
クイックチェック: ループ処理
for ブロックの要件を確認します。
振り返り: ループ処理
必須の track 式を伴う at-for ブロック、空のコレクションに使用する at-empty ブロック、index、first、last、even、odd などのコンテキスト変数を学びました。これは star-ngFor に代わるものです。次は、at-switch による切り替えです。
よくある質問
「@forによるループ」レッスンは無料ですか？
はい。「@forによるループ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「@forによるループ」で何を学びますか？
@forとtrack式でリストをレンダリングします。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「@forによるループ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。