Te damos la bienvenida a nuestra página web, aquí vas a encontrar la solucíon a lo que buscabas.
Solución:
En cada ngDoCheck activado para el ngForOf directiva Angular comprueba qué objetos han cambiado. Utiliza diferentes para este proceso y cada uso diferente trackBy función para comparar el objeto actual con el nuevo. El valor por defecto trackBy función rastrea elementos por identidad:
const trackByIdentity = (index: number, item: any) => item;
Recibe el elemento actual y debe devolver algún valor. Luego, el valor devuelto por la función se compara con el valor que esta función devolvió la última vez. Si el valor cambia, la diferencia informa un cambio. Entonces, si la función predeterminada devuelve referencias de objetos, no coincidirá con el elemento actual si la referencia de objetos ha cambiado. Para que pueda proporcionar su personalizado trackBy función que devolverá algo más. por ejemplo, algunos key valor del objeto. Si esto key value coincide con el anterior, entonces Angular no detectará el cambio.
la sintaxis ...trackBy:userByName ya no es compatible. Ahora debe proporcionar una referencia de función. Aquí está el ejemplo básico:
setInterval( () =>
this.list.length = 0;
this.list.push(name: 'Gustavo');
this.list.push(name: 'Costa');
, 2000);
@Component(
selector: 'my-app',
template: `
item.name
`
)
export class App {
list:[];
identify(index, item)
return item.name;
Aunque la referencia del objeto cambia, el DOM no se actualiza. Aquí está el plunker. Si tienes curiosidad de cómo ngFor funciona bajo el capó, lea esta respuesta.
Como este tema aún está activo y es difícil encontrar una respuesta clara, permítanme agregar algunos ejemplos además de la respuesta de @Max:
aplicación.componente.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;
Vamos a mostrar el array en 3 div usando *ngFor.
aplicación.componente.html
Ejemplo de *ngForsin seguimientoPor:
e.id - e.name
¿Qué pasa si hacemos clic en foo botón ?
→ Se actualizarán los 3 divs. Pruébelo usted mismo, abra su consola para verificar.
Ejemplo de *ngForcon trackBy:
e.id - e.name
¿Qué pasa si hacemos clic en foo botón ?
→ Solo se actualizará el primer div. Pruébelo usted mismo, abra su consola para verificar.
¿Y si actualizamos el primer objeto en lugar de todo el objeto?
foo()
this.array[0].name = "foo";
→ No hay necesidad de usar trackBy aquí.
Es especialmente útil cuando se usa Suscripción que a menudo se parece a lo que he esquematizado con array. Entonces se vería como:
array = [];
subscription: Subscription;
ngOnInit(): void
this.subscription = this.fooService.getArray().subscribe(data =>
this.array = data;
);
identify(index, item)
return item.id;
De la documentación:
Para evitar esta costosa operación, puede personalizar el algoritmo de seguimiento predeterminado. proporcionando la opción trackBy a NgForOf. trackBy toma una función que tiene dos argumentos: índice y elemento. Si se da trackBy, Angular rastrea los cambios por el valor de retorno de la función.
Lea más aquí: https://angular.io/api/common/NgForOf
Encuentra mi respuesta original aquí: https://stackoverflow.com/a/57890227/9753985
Si posees algún titubeo o disposición de afinar nuestro noticia te mencionamos realizar una crítica y con mucho placer lo ojearemos.