reactivos - cómo usar la pista por dentro ngPara angular 2

formularios reactivos angular 6

Question

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

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

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

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

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

Answer 1

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

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: `
<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 puede tomar un nombre de devolución de llamada, 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:

<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

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

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

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

Toda la otra información sobre <ion-card *ngFor="let post of posts;trackBy:post?.id"></ion-card> es incorrecta. Comenzando con Angular 2.4.1 esto arrojará un error en la aplicación.

Answer 3

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:

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

Answer 4

Esta simple solución funcionó para mi escenario

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

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.