如何在 ngFor angular 2 内部使用 track

正如@Eric comments 中所指出的，在大量阅读和玩耍之后，下面是如何在angular2中使用trackBy

1. 首先你需要知道它和angular1的语法不同，现在你需要用;把它和for循环分开.

Usage 1: Track by property of object

 // starting v2. 1 this will throw error, you can only use functions in trackBy from now on

<ion-card *ngFor="let post of posts;trackBy:post?.id">
</ion-card> // **DEPRECATED**
---or---
<ion-card *ngFor="let post of posts;trackBy:trackByFn">
</ion-card>

给你，请安格拉尔

1. 创建一个局部变量post；
2. 告诉trackBy等待，直到这个局部变量准备好"通过使用Elvis运算符 变量名‘，则使用其id作为跟踪器.

所以

// starting v2. 1 this will throw error, you can only use functions in trackBy from now on

*ngFor="#post of posts;trackBy:post?.id"

与Angular 的1相同的是什么

ng-repeat="post in posts track by post.id"

Usage 2: Track using your own Function

@Page({
    template: `
        <ul>
            <li *ngFor="#post of posts;trackBy:identify">
              {{post.data}}
            </li>
        </ul>
    `
})
export class HomeworkAddStudentsPage {
    posts:Array<{id:number,data:string}>;   

    constructor() {
        this.posts = [  {id:1,data:'post with id 1'},
                        {id:2,data:'post with id 2'} ];
    }

    identify(index,item){
      //do what ever logic you need to come up with the unique identifier of your item in loop, I will just return the object id.
      return post.id 
     }

}

trackBy可以使用callback的名称，它将为我们调用它，并提供两个参数:循环的索引和当前项.

为了在Angular 1中实现同样的效果，我曾经:

<li ng-repeat="post in posts track by identify($index,post)"></li>

app.controller(function($scope){
  $scope.identify = function(index, item) {return item.id};
});