大田区から発信するゆるゆる日記

主にITエンジニアに関する備忘録日記。たまに趣味も。何か不備があればコメント頂けると幸いです。Twitterアカウント https://twitter.com/ryuzan03

【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: 関数」の形式で指定します。

 

ラッキング式は次の条件を満たす必要があります。

・引数には、インデックスと値を受け取る

・戻り値には、現在の項目を一意に識別する値を返すようにする