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>

関連項目