Angular TIPS

Angular TIPS

配列の内容を順に出力するには?(ngFor)

2017年11月6日

配列の内容を順に出力できるngForディレクティブ(=ngForOfディレクティブ)の基本的な使い方を説明。また、ngForディレクティブで利用できる特殊変数についてまとめる。

  • このエントリーをはてなブックマークに追加

【対応バージョン】 Angular 4以降。v4時点で執筆しました。

 ngForディレクティブ*1を利用することで、配列の内容を順に出力できます。例えば以下は、記事一覧(articles)を出力する例です。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <table class="table">
  <tr>
    <th>タイトル</th><th>著者</th><th>公開日</th>
  </tr>
  <!--配列articlesの内容を順番に出力-->
  <tr *ngFor="let article of articles">
    <td><a href="{{article.url}}">{{article.title}}</a></td>
    <td>{{article.author}}</td>
    <td>{{article.released | date: 'mediumDate'}}</td>
  </tr>
  </table>
  `,
})
export class AppComponent  { 
  articles = [
    {
      url: 'http://www.buildinsider.net/web/jqueryref',
      title: 'jQuery逆引きリファレンス',
      author: 'WINGSプロジェクト',
      released: new Date(2017, 10, 1)
    },
    ……中略……
  ]  
}
リスト1 記事情報を順番に読み込み、表組みに整形するコード(app.component.ts)
配列の内容をテーブルに整形
  • *1 ngForディレクティブは、厳密にはngForOfディレクティブとなっています。リスト1の*ngFor属性とその値は、ディレクティブをコンパクトに記述するためのシンタックスシュガーとなっており(Angular Microsyntaxと呼ばれる)、内部的に[ngFor][ngForOf]という属性セレクターに展開されたうえで、ngForOfディレクティブが処理されます。

 ngForディレクティブの構文は、以下の通りです。

[構文]ngForディレクティブ

<element *ngFor="let item of list">
contents
</element>

  • element: 任意の要素
  • item: 仮変数
  • list: 繰り返し対象の配列
  • contents: 繰り返し出力するコンテンツ

 ngForディレクティブでは、配列listの先頭から順に要素を取り出し、残りの要素がなくなるまで、<element>要素を繰り返し出力します。このとき、配列から取り出された要素は仮変数itemにセットされ、<element>要素の配下(contents)で参照できます。

 この例であれば、配列articlesの個々の要素が仮変数articleに格納されているはずなので、(例えば)記事のタイトルにはarticle.titleで、公開日にはarticle.releasedでアクセスできます*2

  • *2 releasedプロパティの値を整形するdateフィルターについては、後日、別稿「TIPS:日付/時刻データを整形するには?」で解説の予定です。

ngForディレクティブで利用できる特殊変数

 ngForディレクティブでは、以下のような特殊変数を利用することで、ループに関わる情報にアクセスできます。

変数 概要
index 要素のインデックス値(先頭は0
first 最初の要素か
last 最後の要素か
even インデックス値が偶数か
odd インデックス値が奇数か
ngForディレクティブで利用できる特殊変数

 例えば記事情報に連番を振りたいならば、以下のようなコードを書きます。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <table class="table">
  <tr>
    <th>No.</th><th>タイトル</th><th>著者</th><th>公開日</th>
  </tr>
  <!--インデックス番号(index)に変数iでアクセスできるように-->
  <tr *ngFor="let article of articles; index as i">
    <td>{{i + 1}}</td>
    <td><a href="{{article.url}}">{{article.title}}</a></td>
    <td>{{article.author}}</td>
    <td>{{article.released | date: 'mediumDate'}}</td>
  </tr>
  </table>
  `,
})
リスト2 特殊変数を利用したコード(app.component.ts)
一覧表に連番が振られた結果

 特殊変数を利用するには、ngFor式に対してindex as iのようにローカル変数に割り当てておかなければならない点に注意してください。この例では、特殊変数indexに対して変数iでアクセスできるようにしています。indexの値は0スタートなので、表示に際しては+1している点にも注目です。

 その他、(例えば)firstlastを利用することで、配列(表)の先頭/末尾でのみ適用すべきスタイルを指定できますし、evenoddを利用することで、ループ内で交互に出力すべきコンテンツを定義することもできます。

処理対象:構造ディレクティブ(Structural directives) カテゴリ:基本
処理対象:マイクロシンタックス(Microsyntax) カテゴリ:構造ディレクティブ(Structural directives)
処理対象:テンプレート構文(Template Syntax) カテゴリ:基本
処理対象:NgFor カテゴリ:テンプレート構文(Template Syntax) > ビルトイン構造ディレクティブ(Built-in structural directives)
処理対象:*ngForマイクロシンタックス(*ngFor microsyntax) カテゴリ:テンプレート構文(Template Syntax) > ビルトイン構造ディレクティブ(Built-in structural directives) > NgFor
API:NgForOf(*ngFor) カテゴリ:@angular > common > DIRECTIVE(ディレクティブ)

※以下では、本稿の前後を合わせて5回分(第26回~第30回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

26. インラインフレームに外部リソースをバインドするには?(Property Binding)

セキュリティの観点からデフォルトではiframeのsrc属性やobjectのdata属性にはプロパティバインディングできない。これを回避して信頼できる値としてバインディングする方法を説明する。

27. 要素に適用するスタイルクラスを操作するには?(Class Binding)

スタイルシートとして定義した対象クラスのスタイルを、任意の要素のclass属性に簡単に着脱できるClass Bindingの基本的な使い方を説明する。

28. 【現在、表示中】≫ 配列の内容を順に出力するには?(ngFor)

配列の内容を順に出力できるngForディレクティブ(=ngForOfディレクティブ)の基本的な使い方を説明。また、ngForディレクティブで利用できる特殊変数についてまとめる。

29. 複数の要素を繰り返し出力するには?(ngFor)

配列の内容を順に出力できるngForディレクティブ(=ngForOfディレクティブ)と、ダミーのコンテナー要素(<ng-container>)を使うことで、複数の要素群をまとめて繰り返し出力する方法を説明する。

30. 条件式に応じて要素を表示/非表示にするに?(ngIf)

与えられた条件式に基づき要素の表示/非表示を切り替えるngIfディレクティブの基本的な使い方を説明。また、ngIfディレクティブによる表示/非表示の挙動の特性と注意点も示す。

サイトからのお知らせ

Twitterでつぶやこう!