Die trackBy-Funktion mit ngFor in Angular

1. Verwendung der trackBy-Funktion mit ngFor in Angular
2. Verwendung der ngFor-Funktion in Angular
3. Verwendung von trackBy mit ngFor in Angular

Dieser Artikel befasst sich mit trackyBy mit der ngFor-Direktive und deren Verwendung in Angular.

Verwendung der trackBy-Funktion mit ngFor in Angular

In Angular ermöglicht die trackBy-Funktion dem Benutzer, einen bestimmten Schlüssel auszuwählen, der verwendet wird, um jedes Element in der Liste basierend auf diesem Schlüssel zu analysieren. trackBy ist besonders nützlich, wenn Sie verschachtelte Arrays und Objekte haben, die für jedes eine eindeutige Kennung bereitstellen möchten.

Es ist wichtig zu beachten, dass trackBy nur für die aktuelle Iteration eines Arrays oder Objekts gilt, nicht für alle zukünftigen Iterationen.

Verwendung der ngFor-Funktion in Angular

Da HTML keine eingebaute Template-Sprache hat, fügt Angular eine mächtige Template-Syntax hinzu, die mehrere Direktiven wie ngFor enthält, analog zu for-loops in Computersprachen.

NgFor ist eine eingebaute Direktive in Angular, die verwendet werden kann, um über ein Array oder ein Objekt zu iterieren. Diese Direktive erstellt eine Vorlage für jedes Element in der Liste, fügt es dem DOM hinzu und aktualisiert das DOM, wenn es Änderungen an Elementen gibt.

Syntax:

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

Wir verwenden die Direktive ngFor, um ein beliebiges Array oder eine Objektsammlung zu iterieren. Wenn wir jedoch die Informationen in der Sammlung zu einem bestimmten Zeitpunkt aktualisieren müssen, beispielsweise als Antwort auf eine HTTP-Anfrage, treten Probleme auf.

Infolgedessen muss Angular alle mit den Daten verknüpften DOM-Elemente löschen und neu erstellen. Wir helfen der Angular-Funktion trackBy, dieses Problem zu lösen.

Die Funktion trackBy akzeptiert zwei Argumente, den index und das aktuelle Element. Es muss die spezifische Identität des Elements zurückgeben.

Angular kann nun nachvollziehen, welche Komponenten je nach Identität hinzugefügt oder entfernt wurden. Nur der Konstruktor löscht die bereits geänderten Elemente, wenn Sie das Array aktualisieren.

Verwendung von trackBy mit ngFor in Angular

Lassen Sie uns die Verwendung der trackBy-Funktion mit der ngFor-Direktive von Angular besprechen.

• Zuerst müssen wir die Grundlagen von Angular verstehen und wie es funktioniert.
• Wir müssen die neuste Version des Angular Command Line Interface installieren.
• Das System muss die neuste Node JS-Version installiert haben.

Wir erstellen jetzt ein Programm, das das Array der Vorlage verwendet, um Informationen über die Mitarbeiter anzuzeigen. Wir haben die Direktive ngFor verwendet, um die Reihe der Mitarbeiter zu durchlaufen und die grundlegenden Informationen für jeden anzuzeigen.

Zudem erstellen wir eine trackBy-Methode, die jeden Mitarbeiter eindeutig identifizieren und der ngFor-Direktive zuordnen muss.

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

Codeausschnitt - app.component.html:

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

Ausgabe:

Klicken Sie hier, um die Live-Demonstration des Codebeispiels zu überprüfen.