如何将 `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 都会检查哪些对象发生了变化。它为此过程使用了不同的方法，每个不同的方法都使用 trackBy 函数将当前对象与新对象进行比较。默认的trackBy 函数按身份跟踪项目：

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

它接收当前项目并且应该返回一些值。然后将函数返回的值与此函数上次返回的值进行比较。如果值发生变化，diff 报告变化。因此，如果默认函数返回对象引用，则如果对象引用发生更改，它将与当前项不匹配。因此，您可以提供您的自定义 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。

Answer 2

由于这个话题仍然很活跃，而且很难找到明确的答案，所以除了@Max 的答案之外，我再补充几个例子：

app.component.ts

array = [
    { "id": 1, "name": "bill" },
    { "id": 2, "name": "bob" },
    { "id": 3, "name": "billy" }
]

foo() {
    this.array = [
        { "id": 1, "name": "foo" },
        { "id": 2, "name": "bob" },
        { "id": 3, "name": "billy" }
    ]
}

identify(index, item) {
    return item.id;
}

让我们使用*ngFor将array显示到3个div中。

app.component.html

*ngFor 的示例没有 trackBy：

<div *ngFor="let e of array;">
   {{e.id}} - {{e.name}}
</div>
<button (click)="foo()">foo</button>

如果我们点击foo按钮会发生什么？

→ 3 个 div 将被刷新。 自己试试，打开你的控制台验证一下。

*ngFor 示例 带有 trackBy：

<div *ngFor="let e of array; trackBy: identify">
   {{e.id}} - {{e.name}}
</div>
<button (click)="foo()">foo</button>

如果我们点击foo按钮会发生什么？

→ 只有第一个 div 会被刷新。 自己试试，打开你的控制台验证一下。

如果我们更新第一个对象而不是整个对象呢？

foo() {
    this.array[0].name = "foo";
}

→ 此处无需使用trackBy。

在使用 Subscription 时特别有用，它通常看起来像我用array 设计的那样。所以它看起来像：

 array = [];
 subscription: Subscription;

 ngOnInit(): void {
    this.subscription = this.fooService.getArray().subscribe(data => {
       this.array = data;
    });
 }

 identify(index, item) {
    return item.id;
 }

来自文档：

为避免这种昂贵的操作，您可以自定义默认值 跟踪算法。通过向 NgForOf 提供 trackBy 选项。 trackBy 接受一个有两个参数的函数：index 和 item。如果 trackBy 是给定的，Angular 通过返回值跟踪变化 功能。

在此处阅读更多信息：https://angular.io/api/common/NgForOf

在这里找到我的原始答案：https://stackoverflow.com/a/57890227/9753985

Answer 3

这是我在我的项目中使用的，它允许通过迭代模型的属性进行跟踪，而无需在组件的类中编写函数：

import { Host, Directive, Input } from "@angular/core";
import { NgForOf } from "@angular/common";

@Directive({
    selector: "[ngForTrackByProperty]"
})
export class TrackByPropertyDirective {

    private _propertyName: string = "";

    public constructor(@Host() private readonly _ngFor: NgForOf<any>) {
        this._ngFor.ngForTrackBy = (_: number, item: any) => this._propertyName ? item[this._propertyName] : item;
    }

    @Input("ngForTrackByProperty")
    public set propertyName(value: string | null) {
        // We must accept null in case the user code omitted the ": 'somePropName'" part.
        this._propertyName = value ?? "";
    }

}

用法：

<some-tag *ngFor="let item of models; trackByProperty: 'yourDiscriminantProp'">

Answer 4

app.component.html

<button class="btn btn-warning" (click)="loadCourses()">LoadCourses</button>
<ul>
    <li *ngFor="let course of courses; trackBy:trackCourse">
        {{course.name}}
    </li>
</ul>

app.component.ts

loadCourses() {

    this.courses = [
    {id:1, name:'cour1'},
    {id:2, name:'cour2'},
    {id:3, name:'cour3'}
    ]  
};

trackCourse(index : number, course: any) {
    return course ? course.id : undefined;
};

参考 Mosh 编码 You can find in Directives Section

Answer 5

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

以下代码示例

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

Answer 6

你也可以使用

*ngFor="a of array; index as i;"

和

[attr.data-target]="'#test' + i"

和

name="test{{i}}