angular - 如何使用 `trackBy` 和 `ngFor`

Question

我真的不明白我应该从 trackBy 返回什么。根据我在网上看到的一些示例，我应该返回对象上某些属性的值。这样对吗？为什么要获取 index 作为参数？

例如，在下面的情况下:

Component.component.ts

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

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

Component.template.html

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

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

Answer 1

在为 ngForOf 指令触发的每个 ngDoCheck 上，Angular 检查哪些对象发生了变化。它为此过程使用了 differ，每个 diff 使用 trackBy 函数将当前对象与新对象进行比较。默认的 trackBy 函数按身份跟踪项目:

const trackByIdentity = (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 并没有更新。 Here is笨蛋。如果你好奇 ngFor 是如何工作的，read this answer .