Angular Academy · Lektion

Listen und Rendering optimieren

Große Listen mit Tracking beschleunigen

Listen und Rendering optimieren ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum das Rendern von Listen wichtig ist

Listen sind der häufigste Performance-Engpass. Eine gesamte Liste bei jeder Änderung erneut zu rendern, verursacht unnötigen Aufwand und setzt den DOM-Zustand zurück. Angular stellt Ihnen Werkzeuge für effizientes Rendern bereit.

Der @for-Block

Der integrierte Control-Flow-Block @for erfordert einen track-Ausdruck, damit Angular jedes Element bei Aktualisierungen identifizieren kann.

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
}

Warum track erforderlich ist

Ohne eine stabile Identität kann Angular nicht erkennen, welche Elemente verschoben, hinzugefügt oder entfernt wurden. track ordnet jedem gerenderten Knoten seine Daten zu, sodass Angular den DOM wiederverwendet, statt ihn neu zu erstellen.

Nach Identität verfolgen

Verwenden Sie einen eindeutigen, stabilen Schlüssel wie eine ID. Vermeiden Sie track $index bei Listen, deren Reihenfolge sich ändert, da Änderungen des Index unnötige DOM-Änderungen verursachen.

@for (user of users(); track user.id) {
  <app-user-card [user]="user" />
}

track $index, wenn es angemessen ist

Wenn Elementen eine eindeutige ID fehlt und sie niemals neu angeordnet werden, etwa bei Protokollen, an die nur angehängt wird, ist track $index akzeptabel.

@for (line of logLines(); track $index) {
  <p>{{ line }}</p>
}

Das frühere trackBy

Beim älteren *ngFor stellen Sie eine trackBy-Funktion bereit, die einen stabilen Schlüssel zurückgibt.

trackById(index: number, item: Item) {
  return item.id;
}

trackBy im Template

Verweisen Sie in der *ngFor-Mikrosyntax auf die Funktion.

<li *ngFor="let item of items; trackBy: trackById">
  {{ item.name }}
</li>

Leere und Ladezustände

@for unterstützt einen @empty-Block für den Fall, dass die Sammlung leer ist. Dadurch sind keine zusätzlichen *ngIf-Prüfungen nötig.

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>No items yet.</li>
}

Funktionsaufrufe in Bindings vermeiden

Funktionen in Templates werden bei jeder Prüfung ausgeführt. Berechnen Sie Werte stattdessen vorab in Signals oder memoisierten Feldern, anstatt Methoden in @for-Blöcken aufzurufen.

OnPush + unveränderliche Listen

Kombinieren Sie OnPush mit neuen Array-Referenzen bei jeder Änderung. Mit dem richtigen track aktualisiert Angular nur die Zeilen, die tatsächlich geändert wurden.

this.items.update(list => [...list, newItem]);

Virtuelles Scrollen

Bei sehr großen Listen rendern Sie mit dem CDK cdk-virtual-scroll-viewport nur die sichtbaren Zeilen. So bleibt der DOM unabhängig von der Datenmenge klein.

<cdk-virtual-scroll-viewport itemSize="48">
  <div *cdkVirtualFor="let item of items">
    {{ item.name }}
  </div>
</cdk-virtual-scroll-viewport>

Kurzer Test

Testen Sie Ihr Verständnis der Listenoptimierung.

Zusammenfassung

Sie haben gelernt, Listen mit @for ... track oder dem früheren trackBy zu optimieren: Verwenden Sie stabile Schlüssel, einen @empty-Block, unveränderliche Aktualisierungen mit OnPush und virtuelles Scrollen für sehr große Sammlungen.

Häufig gestellte Fragen

Ist die Lektion „Listen und Rendering optimieren“ kostenlos?

Ja — der vollständige Text von „Listen und Rendering optimieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Listen und Rendering optimieren“?

Große Listen mit Tracking beschleunigen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Listen und Rendering optimieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy