56

私が推測できるすべての構文を試してみましたが、うまくいきませんでした。

<!--- 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. コントローラ クラスでメソッドを作成する

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

と

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

これが唯一の方法ですか？trackBy のプロパティ名をインラインで指定するだけではダメですか?

4

4 に答える 4

95

@Eric コメントで指摘されているように、たくさん読んで遊んだ後、angular2 で trackBy を使用する方法を次に示します。

  1. angular1 と同じ構文ではないことを最初に知っておく必要があります。次に、for ループから;.

使用法 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に頼む

  1. ローカル変数の投稿を作成します。
  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"

使用法 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 はコールバックの名前を取ることができ、ループのインデックスと現在の項目の 2 つのパラメーターを指定してそれを呼び出します。

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};
});
于 2016-03-31T10:52:25.783 に答える