【Angular】トラッキング式
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
トラッキング式
トラッキング式とは?
トラッキング式(trackBy関数)は、ngForによるオブジェクト追跡のためのキーを決める式です。
ngForディレクティブでは、オブジェクトの同一性を元に配列内要素の追加/削除を追跡しています。なので、通常は一見すると値が変わってなくても、オブジェクトの同一性が変化していれば、新しいオブジェクトで全ての項目を再生成することになります。
しかし、トラッキング式でオブジェクト追跡のためのキーを決めてあげれば、必要以上に配列内要素の追加/削除を行わなくなります。
具体的にどういった時に使うのか
サーバからデータを何度か取得する場合など。
データ内容(値)が同じでも、実はオブジェクトは全て再生成されています。従って、ngForはオブジェクトを追跡できないので、既存の項目は全て破棄して、新しいオブジェクトを全て再生成することになります。
そこで、トラッキング式(trackBy関数)を使用して、オブジェクト追跡のためのキーを決めれば、そのキーでオブジェクトを識別し、既存の項目と等しいオブジェクトは更新せず、新規に追加したデータ(値)だけを追加します。
使い方
@Component({
selector: 'app',
template: `
<div *ngFor="let member of members; trackBy: trackFn">
{{member.name}}
</div>
<input type="button" (click)="onClick()" value="情報追加" />`
})
export class AppComponent{
members=[
{ id: '1',
name: 'takuya'},
{ id: '2',
name: 'ayaka'},
];
onclick(){
members=[
{ id: '1',
name: 'takuya'},
{ id: '2',
name: 'ayaka'},
{ id: '3',
name: 'johny'},
];
}
trackFn(index: any, member: any) {
return member.id;
}
}
トラッキング式をngForディレクティブを通知するには、該当する要素に「trackBy: 関数」の形式で指定します。
トラッキング式は次の条件を満たす必要があります。
・引数には、インデックスと値を受け取る
・戻り値には、現在の項目を一意に識別する値を返すようにする