it-swarm.com.ru

как использовать трек внутри ngFor angular 2

пробовал каждый синтаксис, который я могу догадаться, не мог сделать это работает!

<!--- 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. Создание метода в классе контроллера

    идентифицировать (индекс, сообщение: сообщение) {возвращение post.id}

а также

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

это единственный способ? Могу ли я не просто указать встроенное имя свойства для trackBy?

44
Zalaboza

Как отмечено в комментарии @Eric, и после большого прочтения и игры, вот как использовать trackBy в angular2

  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. создать локальную переменную post;
  2. вы указываете trackBy подождать, пока локальная переменная не будет готова "вы делаете это с помощью оператора elvis" знак вопроса после имени переменной ", а затем используете его идентификатор в качестве трекера.

так

// 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};
});
82
Zalaboza

Как вы уже поняли, использование функции - единственный способ использовать trackBy in Angular 2

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

Официальная документация гласит, что https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

Вся остальная информация о <ion-card *ngFor="let post of posts;trackBy:post?.id"></ion-card> неправильно. Начиная с Angular 2.4.1 это также приведет к ошибке в приложении.

9
Volker Andres

Концепция TrackBy:

  1. ngFor of angular автоматически оптимизирует отображение измененных/созданных/удаленных объектов путем отслеживания идентификатора объекта. Итак, если вы создаете все новые объекты в списке и затем используете ngFor, он отобразит весь список.

  2. Давайте рассмотрим сценарий, в котором, несмотря на все ngFor оптимизации, рендеринг все еще занимает много времени. В этом случае мы используем trackBy. Таким образом, мы можем предоставить другой параметр для отслеживания объектов, чем идентификатор объекта, который является критерием отслеживания по умолчанию.

Бегущий пример:

<!DOCTYPE html>
<html>

<head>
    <title>Angular 2.1.2 + TypeScript Starter Kit</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://unpkg.com/[email protected]/dist/zone.js"></script>
    <script src="https://unpkg.com/[email protected]/Reflect.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/system.js"></script>
    <script src="https://unpkg.com/[email protected]/lib/TypeScript.js"></script>
    <script src="config.js"></script>
  <script>
      System.import('app')
          .catch(console.error.bind(console));
    </script>
</head>

<body>
    <my-app>
        loading...
    </my-app>
</body>

</html>
2
Ruchi Wadhwa