cómo usar la pista por dentro ngPara angular 2

intenté cada syntax que puedo adivinar ¡no podría hacer que funcione!

  {{post|json}}    {{post|json}}    {{post|json}}    {{post|json}}    {{post|json}}  

el único enfoque que funcionó para mí fue

  1. Creación de método en la clase de controlador

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

y

   

¿Es esto solo así? ¿No puedo simplemente especificar la propiedad en línea para trackBy?

Como se señala en el comentario de @Eric, y después de muchas lecturas y juegos, aquí se explica cómo usar trackBy en angular2

  1. lo primero que necesita saber es que no tiene la misma syntax que angular1, ahora necesita separarlo del ciclo for con a ; .

Uso 1: seguimiento por propiedad del objeto

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

aquí preguntas angular2 a

  1. crear una publicación variable local;
  2. le dices a trackBy que espere hasta que esta variable local esté lista “hazlo usando el operador elvis ‘el signo de interrogación después del nombre de la variable’, luego usa su identificación como rastreador.

asi que

 // starting v2. 1 this will throw error, you can only use functions in trackBy from now on *ngFor="#post of posts;trackBy:post?.id" 

es lo mismo que angular 1

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

Uso 2: Rastrea usando tu propia función

 @Page({ template: ` 
  • {{post.data}}
` }) 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 puede tomar un nombre de callback, y lo llamará para que proporcionemos 2 parámetros: el índice del bucle y el elemento actual.

Para lograr lo mismo con Angular 1, solía hacer:

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

    Como ya reconoció, usar una función es la única forma de usar trackBy en Angular 2

      

    La documentación oficial establece que https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

    Toda la otra información sobre es incorrecta. Comenzando con Angular 2.4.1 esto arrojará un error en la aplicación.

    El concepto detrás de trackBy:

    1. ngFor angular, optimiza automáticamente la visualización de objetos modificados / creados / eliminados mediante el seguimiento a través de la identidad del objeto. Entonces, si crea todos los objetos nuevos en la lista y luego utiliza ngFor , generará una lista completa.

    2. Consideremos un escenario en el que, a pesar de todas las ngFor optimizaciones, la renderización todavía lleva su tiempo. En ese caso usamos trackBy . Entonces, podemos proporcionar otro parámetro para rastrear objetos que la identidad del objeto, que es un criterio de seguimiento predeterminado.

    Un ejemplo en ejecución:

        Angular 2.1.2 + TypeScript Starter Kit            loading...    

    Esta simple solución funcionó para mi escenario

      {{i+1}}  

    EDITAR: como lo sugiere Jeremy Thille a continuación, debe usar let lugar de # , ya que # está en desuso en las últimas versiones de Angular2.