*AngularのngForディレクティブ
提供:Dev Guides
NgForは、組み込みのテンプレートディレクティブであり、配列やオブジェクトなどを簡単に反復処理して、各アイテムのテンプレートを作成できます。
この投稿はAngular2以上をカバーしています
その使用の基本的な例を次に示します。
<ul> <li *ngFor="let user of users">{{ user.name }}</li> </ul>
これにより、次のようなhtmlが出力されます。
<ul> <li>Al Dente</li> <li>D. Liver</li> <li>Pepe Roni</li> </ul>
- let user は、テンプレートで使用できるローカル変数を作成します。
- of users は、コンポーネントで使用可能にする必要がある反復可能なユーザーを反復処理することを意味します。
- ngForの前の*文字は、親テンプレートを作成します。 これは、次の構文へのショートカットです: template =“ ngFor let item of items”。
利用可能なローカル変数
次のエクスポートされた値にローカル変数を設定することもできます: index 、 first 、 last 、even 、 odd [X140X ]。 index は現在のループインデックスを返し、他の値は値がtrueかfalseかを示すブール値を提供します。 例えば:
<ul> <li *ngFor="let user of users; let i = index; let odd = odd" [class.odd]="odd"> {{i + 1}}. {{ user.name }} </li> </ul>
次のマークアップを生成します。
<ul> <li>1. Al Dente</li> <li class="odd">2. D. Liver</li> <li>3. Pepe Roni</li> </ul>