*ngFor

*ngForはテンプレート内で繰り返し処理を行うためのディレクティブです。

*ngForではfor-of構文を利用して繰り返し処理が行えます。

@Component({
  selector: 'app',
  template: `
    <ul>
      <li *ngFor="let item of items">{{item.name}}</li>
    </ul>
  `
})
export class App {
 items = [
    {id: 1, name:'Superman'},
    {id: 2, name:'Batman'},
    {id: 5, name:'BatGirl'},
    {id: 3, name:'Robin'},
    {id: 4, name:'Flash'}
 ];
}

以下のようにすることで配列のインデックス番号をiというローカル変数で利用できるようになります。

<li *ngFor="let item of items; let i = index">{{i}}.{{item.name}}</li>

これは以下のようにasを利用して指定することも可能です。

<li *ngFor="let item of items; index as i">{{i}}.{{item.name}}</li>

index以外にもfirst、last、even、oddといったローカル変数を利用することができます。

trackBy

*ngForではパフォーマンスチューニングの項目としてtrackByという機能が用意されている。

例えば以下のようにitemsの配列を冒頭から1つづつ削除していく機能を実装した場合、イメージとしては最初のli要素が削除される印象だがAngularは1個目から4個目までの配列の内容が変更され5個目の配列が変更されたと判定を行う。

@Component({
  selector: 'app',
  template: `
    <input type="button" (click)="shift()" value="shift">
    <ul>
      <li *ngFor="let item of items;">{{item.name}}</li>
    </ul>
  `
})
export class App {
  items = [
      {id: 1, name:'Superman'},
      {id: 2, name:'Batman'},
      {id: 3, name:'BatGirl'},
      {id: 4, name:'Robin'},
      {id: 5, name:'Flash'}
  ];
  shift(){
    this.items.shift()
  }
}

これを正しくAngularに正しく伝えるためには一意となるキーを指定する必要があり、その際にtrackByを利用しいます。

以下のサンプルではtrackByを利用してidをキーとして設定しています。

また、確認用に3個目のliに色を付けるmarkingメソッドを用意しています。これによりtrackByがない場合は先頭の要素を削除しても3個目のliに色が付き続けているが、trackByを指定すると先頭の要素を削除するたびに2個目、1個目と移動していき先頭のliが削除されていっているのが確認できます。

@Component({
  selector: 'app',
  template: `
    <input type="button" (click)="marking()" value="marking">
    <input type="button" (click)="shift()" value="shift">
    <ul>
      <li *ngFor="let item of items; trackBy: trackItem">{{item.name}}</li>
    </ul>
  `
})
export class App {
  items = [
      {id: 1, name:'Superman'},
      {id: 2, name:'Batman'},
      {id: 3, name:'BatGirl'},
      {id: 4, name:'Robin'},
      {id: 5, name:'Flash'}
  ];
  marking(){
    document.getElementsByTagName('li')[2].style.color = 'red';
  }
  shift(){
    this.items.shift()
  }
  trackItem(index, item){
    return item.id
  }
}

ng-template

*ngForはng-templateを利用すると以下のように記述することもできる。

<ul>
  <ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackItem">
    <li>{{i}}.{{item.name}}
  </ng-template>
</ul>

参考URL

NgForOf - ts - API

登録日 : 2017年05月04日最終更新日 : 2017年5月5日

Angularリファレンス

*ngFor

trackBy

ng-template

参考URL

同じカテゴリー(@angular/common)のエントリー

検索

スポンサードリンク

バージョン

リファレンス