Как использовать трек внутри ng для угловых 2

Question

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

<!--- 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?

Answer 1

Как отмечено в комментарии @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'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 может принимать имя обратного вызова, и оно будет вызывать его для нас, предоставляя 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};
});

Answer 2

Как вы уже поняли, использование функции является единственным способом использования trackBy в угловом 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, это также приведет к ошибке в приложении.

Answer 3

Просто хочу добавить несколько примеров (Angular 2+) в дополнение к ответам других, чтобы сделать использование trackBy понятным.

Из документации:

Чтобы избежать этой дорогостоящей операции, вы можете настроить алгоритм отслеживания по умолчанию. предоставив параметр trackBy для NgForOf. trackBy принимает функцию с двумя аргументами: index и item. Если указан trackBy, Angular отслеживает изменения по возвращаемому значению функции.

Подробнее здесь: https://angular.io/api/common/NgForOf

Пример лучше объяснит это.

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;
   }

Покажем array в 3 деления, используя *ngFor.

app.component.html

Пример *ngFor без trackBy:

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

Что произойдет, если мы нажмем на foo кнопка?

→ 3 блока будут обновлены. Попробуйте сами, откройте консоль, чтобы проверить.

Пример *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 Вот.

Это особенно полезно при использовании подписки, которая часто выглядит так, как я схематизировал.array. Это будет выглядеть так:

   array = [];
   subscription: Subscription;

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

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

Answer 4

Концепция 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/zone.js@0.6.21/dist/zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.9/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.41/dist/system.js"></script>
    <script src="https://unpkg.com/typescript@2.1.4/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>

Answer 5

Это глобальная директива свойства trackBy Angular со строгой проверкой типов для обработки trackBy полностью в шаблоне путем передачи свойства:

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

@Directive({
    selector: '[ngForTrackByProperty]'
})
export class NgForTrackByPropertyDirective<T> {

    @Input() ngForOf!: NgIterable<T>;
    @Input() ngForTrackByProperty!: keyof T;

    constructor(@Host() ngForOfDir: NgForOf<T>) {
        ngForOfDir.ngForTrackBy = (_, item: T): T[keyof T] => item[this.ngForTrackByProperty];
    }
}

Применение

      import { Component } from '@angular/core';

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of list; trackByProperty: 'id'">
        {{ item.id }} {{ item.name }}
      </li>
    </ul>
  `,
})
export class AppListComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];
}

NPM https://www.npmjs.com/package/ng-for-track-by-property

github https://github.com/nigrosimone/ng-for-track-by-property

Answer 6

Это простое решение сработало для моего сценария

<ion-card *ngFor="let post of posts;let i = index"> 
    {{i+1}}
</ion-card>

РЕДАКТИРОВАТЬ: Как предложено Джереми Тилле ниже, вы должны использовать let вместо #, как # устарел в последних версиях Angular2.