*AngularのngForディレクティブ
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 、
<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>