から何を返すべきかよくわかりません。Web で見たいくつかの例に基づくと、オブジェクトの何らかのプロパティの値を返す必要があります。これで正しいでしょうか?パラメーターとしてtrackByget する必要があるのはなぜですか?index
たとえば、次の場合:
コンポーネント.コンポーネント.ts
constructor() {
window.setInterval(() => this.users = [
{ name: 'user1', score: Math.random() },
{ name: 'user2', score: Math.random() }
],
1000);
}
userByName(index, user) {
return user.name;
}
コンポーネント.テンプレート.html
<div *ngFor="let user of users; trackBy:userByName">
{{user.name}} -> {{user.score}}
</div>
このテンプレートに表示されるオブジェクトは、名前が変更されていないにもかかわらず、更新されています。なぜでしょうか?
ベストアンサー1
ngDoCheckディレクティブがトリガーされるたびにngForOf、Angular はどのオブジェクトが変更されたかを確認します。このプロセスには、differ が使用され、differ ごとに関数を使用して trackBy現在のオブジェクトと新しいオブジェクトを比較します。デフォルトのtrackBy関数は、ID によってアイテムを追跡します。
const identify = (index: number, item: any) => item;
現在の項目を受け取り、何らかの値を返す必要があります。次に、関数によって返された値は、この関数が最後に返した値と比較されます。値が変更された場合、differ は変更を報告します。したがって、デフォルトの関数がオブジェクト参照を返す場合、オブジェクト参照が変更されていると、現在の項目と一致しません。したがって、trackBy別のものを返すカスタム関数を提供できます。たとえば、オブジェクトの何らかのキー値です。このキー値が以前の値と一致する場合、Angular は変更を検出しません。
この構文...trackBy:userByNameはサポートされなくなりました。関数参照を指定する必要があります。基本的な例は次のとおりです。
setInterval( () => {
this.list.length = 0;
this.list.push({name: 'Gustavo'});
this.list.push({name: 'Costa'});
}, 2000);
@Component({
selector: 'my-app',
template: `
<li *ngFor="let item of list; trackBy:identify">{{item.name}}</li>
`
})
export class App {
list:[];
identify(index, item){
return item.name;
}
オブジェクト参照は変更されますが、DOM は更新されません。ここはngForプランカー。内部の仕組みに興味があるならこの回答を読む。