*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
登録日 : 2017年05月04日 最終更新日 : 2017年5月5日