如何在ngFor中使用trackBy

Question

我真的不明白我应该从trackBy返回什么。根据我在网上看到的例子，我应该返回对象上某些属性的值。这是对的吗？为什么我将索引作为参数？

例如，在以下情况中：

constructor() {
    window.setInterval(() => this.users = [
            {name: 'user1', score: Math.random()},
            {name: 'user2', score: Math.random()}],
        1000);
}

userByName(index, user) {
    return user.name;
}

...

<div *ngFor="let user of users; trackBy:userByName">{{user.name}} -> {{user.score}}</div>

尽管名称未更改，但模板中显示的对象仍会更新。为什么？

Answer 1

在针对ngDoCheck指令触发的每个ngForOf上，Angular检查哪些对象已更改。它使用不同的这个过程，每个不同使用trackBy函数来比较当前对象与新对象。默认的trackBy函数按标识跟踪项目：

const trackByIdentity = (index: number, item: any) => item;

它接收当前项并应返回一些值。然后将函数返回的值与此函数上次返回的值进行比较。如果值更改，则差异会报告更改。因此，如果默认函数返回对象引用，则在对象引用已更改时，它将与当前项不匹配。因此，您可以提供自定义的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不会更新。 Here is the plunker。如果你很好奇ngFor如何在引擎盖下工作，read this answer。

Answer 2

这个有角度的NgFor文件将帮助您。 https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

Below example for your code

<div *ngFor="let user of users; trackBy:user?.name">
 {{user.name}} -> {{user.score}}
</div>