如何在ngFor内部使用跟踪2 [英] how to use track by inside ngFor angular 2

问题描述

尝试了我猜不到的所有语法！

tried every syntax i can guess couldnt make it works !

<!--- THIS WORKS FINE --->
<ion-card *ngFor="#post of posts">
{{post|json}}
</ion-card>

<!--- BLANK PAGE --->
<ion-card *ngFor="#post of posts track by post.id">
{{post|json}}
</ion-card>

<!--- Exception : Cannot read property 'id' of undefined --->
<ion-card *ngFor="#post of posts;trackBy:post.id">
{{post|json}}
</ion-card>

<!--- Exception : Cannot read property 'undefined' of undefined --->
<ion-card *ngFor="#post of posts;trackBy:posts[index].id">
{{post|json}}
</ion-card>

<!--- Blank page no exception raised !  --->
<ion-card *ngFor="#post of posts;#index index;trackBy:posts[index].id">
{{post|json}}
</ion-card>

唯一对我有用的方法是

1. 控制器类中的创建方法

1. Creating method in controller Class

identify(index，post:Post){ 返回post.id }

identify(index,post:Post){ return post.id }

和

<ion-card *ngFor="#post of posts;trackBy:identify">
</ion-card>

这是唯一的方法吗?我不仅可以为trackBy内联指定属性名称吗?

is this is only way ? can i not just specify a property name inline for trackBy ?

推荐答案

正如@Eric注释中指出的那样，经过大量阅读和玩耍之后，这里是如何在angular2中使用trackBy

As pointed out in @Eric comment, and after lots of reading and playing around, here is how to use trackBy in angular2

1. 首先，您需要了解它与angular1的语法不同，现在您需要使用;将其与for循环分开.

1. the first thing you need to know its not same syntax as angular1, now you need to separate it from the for loop with a ;.

用法1:按对象的属性进行跟踪

 // 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>

在这里，您要求angular2

here you ask angular2 to

1. 创建本地变量帖子；
2. 您告诉trackBy等到该局部变量准备就绪后，您可以通过使用elvis运算符' 变量名称"，然后将其ID用作跟踪器.

1. create a local variable post;
2. you tell trackBy to wait untill this local variable is ready "you do that by using elvis operator 'the question mark after the variable name', then use its id as tracker.

如此

// 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相同

is what same as angular's 1

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

用法2:使用您自己的功能进行跟踪

@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可以使用回调的名称，它将为我们提供两个参数:循环的索引和当前项.

trackBy can take a name of callback, and it will call it for us supplying 2 parameters: the index of the loop and the current item.

为达到与Angular 1相同的目的，我曾经做过:

To achieve the same with Angular 1, I used to do:

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

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

这篇关于如何在ngFor内部使用跟踪2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！