Angular のngFor ディレクティブの使い方

2018.05.23

Angular のngFor ディレクティブの使い方

AngularにはngForディレクティブというディレクティブが標準で用意されています。

for文でループする機能です。記述方法は以下の通りです。

<xxx *ngFor='let 仮引数 of コンポーネントのプロパティ'>

具体的には

<div *ngFor='let tmp of list>～</div>

というように記述します。

dell.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dell',
  templateUrl: './dell.component.html',
  styleUrls: ['./dell.component.css']
})
export class DellComponent implements OnInit {
  constructor() { }
  public readonly list = [// listプロパティ
    {'a':'aaa','b':'test1'},
    {'a':'bbb','b':'test2'},
    {'a':'ccc','b':'test3'}
  ];
  ngOnInit() {
  }
}

dell.component.html

<table>
  <tr *ngFor='let tmp of list'> <!-- コンポーネントのlistプロパティ -->
    <td>{{tmp.a}}</td>
    <td>{{tmp.b}}</td>
  </tr>
</table>

以下のように表示されます。

Angular のngFor ディレクティブの使い方

詳細は「AngularとTypeScriptでSPAを作成する」を参照ください。

コメント

タイトルとURLをコピーしました