La función trackBy con ngFor en Angular

1. Uso de la función trackBy con ngFor en Angular
2. Usando la función ngFor en Angular
3. Usando el trackBy con ngFor en Angular

Este artículo abordará trackyBy con la directiva ngFor y su utilización en Angular.

Uso de la función trackBy con ngFor en Angular

En Angular, la función trackBy permite al usuario seleccionar una clave específica que se utilizará para analizar cada elemento de la lista en función de esa clave. trackBy es especialmente útil cuando tiene matrices y objetos anidados que desean proporcionar un identificador único para cada uno.

Es importante tener en cuenta que trackBy solo se aplica a la iteración actual de un array u objeto, no a todas las iteraciones futuras.

Usando la función ngFor en Angular

Dado que HTML carece de un lenguaje de plantilla incorporado, Angular agrega una poderosa sintaxis de plantilla, que contiene varias directivas como ngFor, análoga a for-loops en lenguajes informáticos.

NgFor es una directiva integrada en Angular que se puede usar para iterar sobre un array o un objeto. Esta directiva crea una plantilla para cada elemento de la lista, la agrega al DOM y actualiza el DOM cuando hay cambios en los elementos.

Sintaxis:

<ul>
  <li *ngFor="let item of items">{{ item.name }}</li>
</ul>

Usamos la directiva ngFor para iterar cualquier matriz o colección de objetos. Sin embargo, si necesitamos actualizar la información en la colección en algún momento, como en respuesta a una solicitud HTTP, nos encontraremos con problemas.

Como resultado, Angular debe eliminar y volver a crear todos los elementos DOM vinculados con los datos. Ayudamos a la función Angular trackBy a resolver este problema.

La función trackBy acepta dos argumentos, el índice y el elemento actual. Debe devolver la identidad específica del artículo.

Angular ahora puede rastrear qué componentes se agregaron o eliminaron según la identidad particular. Solo el constructor elimina los elementos que ya se han modificado cuando actualiza el array.

Usando el trackBy con ngFor en Angular

Analicemos el uso de la función trackBy con la directiva ngFor de Angular.

• Primero, debemos entender los fundamentos de Angular y cómo funciona.
• Debemos instalar la última versión de la Interfaz de Línea de Comandos Angular.
• El sistema debe tener instalada la versión más reciente de Node JS.

Ahora crearemos un programa que use el array de la plantilla para mostrar información sobre los empleados. Usamos la directiva ngFor para recorrer el array de empleados y mostrar la información básica de cada uno.

También creamos un método trackBy, que debe identificar de forma única a cada empleado y asignarlo a la directiva ngFor.

Fragmento de código - app.component.ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  informations: { id: number; name: string; Age: string; }[];

  EmplyeesInfo(){
    this.informations = [
      { id:1, name:'Adil',  Age:' (Age 24)' },
      { id:2, name:'Steve' , Age:' (Age 30)'},
      { id:3, name:'John' ,Age:' (Age 27)'},
      { id:2, name:'Sofia' , Age:' (Age 23)' },
      { id:3, name:'Adam', Age: ' (Age 36)' }
    ];
  }
  trackEmployee(index: any,information: { id: any; }){
    return information ? information.id : undefined;
  }
}

Fragmento de código - app.component.html:

<button (click)="EmplyeesInfo()">Employees Information</button>
<ul>
  <li *ngFor="let information of informations; trackBy: trackEmployee">
    {{ information.name }}
    {{ information.Age }}
  </li>
</ul>

Producción:

Haga clic aquí para ver la demostración en vivo del código de muestra.