Angular ngFor - Lernen Sie alle Funktionen, nicht nur für Arrays

In diesem Beitrag werden wir die ngFor Core-Direktive durchgehen, und zwar werden wir folgendes durchgehen:

Was macht ngFor und was ist seine Syntax
Was sind die häufigsten Fehler im Zusammenhang mit ngFor
Variable Sichtbarkeit
Finden der Indexposition eines Elements
Wie eine Tabelle mit Hilfe von even und odd strippen
Identifizieren der first und das last Element einer Liste
Wie verfolgt ngFor Elemente, und warum kann es für die Performance wichtig sein?
Wie verwendet man trackBy?
Wann verwendet man trackBy?
Lernen Sie, warum ngFor nicht nur für Arrays geeignet ist
Eine kurze Frage für Sie zum Schluss zum Lernen

Lassen Sie uns also beginnen, in ngFor einzutauchen! Unten finden Sie auch eine Video-Version dieses Beitrags, wenn Sie es bevorzugen, und der laufende Code dieses Beitrags ist hier verfügbar.

Die ngFor-Funktionen werden auch in diesem Video behandelt, schauen Sie es sich an:

Was können wir mit ngFor tun?

Die Core-Direktive ngFor erlaubt uns, Listen und Tabellen für die Datenpräsentation in unseren HTML-Vorlagen zu erstellen. Nehmen wir zum Beispiel die folgenden Daten:

Mit ngFor können wir diese Daten in Form einer Datentabelle auf dem Bildschirm ausgeben, indem wir HTML ähnlich wie hier erzeugen:

Was ist die Syntax von ngFor?

Um ngFor zu verwenden, lassen Sie uns eine Komponente erstellen, damit wir eine funktionierende HTML-Vorlage haben:

Diese Vorlage wird die HTML-Tabelle generieren, die wir gerade oben gezeigt haben. Wir können in diesem Beispiel die (gängigste) Syntax für die Verwendung von ngFor sehen:

Wir übergeben an ngFor einen Iterationsausdruck
Eine Schleifenvariable namens hero wird mit dem Schlüsselwort let definiert, was mit der Javascript-Syntax übereinstimmt
Der Ausdruck hat die Form var i of items, was mit der Javascript of Iterationsfunktionalität übereinstimmt

Sichtbarkeit der Variablen

Beachten Sie, dass die Schleifenvariable hero nur innerhalb der Schleife sichtbar ist, außerhalb des ngFor-Abschnitts können Sie nicht darauf zugreifen.

Gängige ngFor-Fehler, auf die Sie achten sollten

Wenn Sie einen AngularJs-Hintergrund haben, werden Sie diesen Fehler ein paar Mal sehen, bevor Sie sich an die neue Angular-Syntax gewöhnen:

Can't bind to 'ngFor' since it isn't a known property of 'tr'

Das liegt daran, dass Sie entweder versehentlich item in items statt item of items verwendet haben oder vergessen haben, das Schlüsselwort let an den Anfang des Ausdrucks zu setzen:

Ermitteln des Index eines Listenelements

Eine sehr häufige Anforderung ist es, einer Liste die numerische Indexposition ihres Elements hinzuzufügen. Wir können den Index des aktuellen Elements erhalten, indem wir die Variable index verwenden:

Beachten Sie, dass Sie das let-Schlüsselwort benötigen, um den Wert des Index zu erhalten, sonst erhalten Sie einen Fehler ähnlich diesem:

Parser Error: Unexpected token = at column ...

Mit dieser Änderung sieht das generierte HTML nun wie folgt aus:

Wie man eine Tabelle mit geraden und ungeraden Zeilen strippen kann

Eine weitere sehr häufig benötigte Funktionalität beim Erstellen von Tabellen ist die Möglichkeit, eine Tabelle zu strippen, indem man den geraden oder ungeraden Zeilen eine andere CSS-Klasse hinzufügt.

Sagen wir, dass wir der obigen Tabelle eine CSS-Klasse even hinzufügen wollen, wenn die Zeile gerade ist und die CSS-Klasse odd, wenn die Zeile ungerade ist.

Um das zu erreichen, haben wir ein paar Variablen zur Verfügung: even und odd, die zusammen mit ngClass auf folgende Weise verwendet werden können:

Werfen wir einen Blick auf das HTML, das von dieser Vorlage generiert wird:

Wie wir sehen, hat ngClass die CSS-Klassen in die richtigen Zeilen eingefügt, wie wir es erwarten würden.

Erstes und letztes Element einer Liste identifizieren

Genauso wie die gerade und ungerade Funktionalität, gibt es auch zwei weitere Variablen, die verwendet werden können, um das erste und das letzte Element der Liste zu identifizieren:

Damit wird dem ersten Element der Liste eine CSS-Klasse mit dem Namen first und dem letzten Element der Liste eine CSS-Klasse mit dem Namen last hinzugefügt:

Wie funktioniert ngFor, wenn wir Elemente der Liste hinzufügen oder entfernen?

Wenn die Eingabeliste verändert wird, versucht ngFor zu vermeiden, ständig die DOM-Elemente der Liste zu erzeugen und zu zerstören, da dies eine teure Operation ist. Auch wenn wir ngFor eine neue Liste übergeben, bedeutet dies nicht, dass die gesamte Liste neu erstellt wird, d. h. das gesamte DOM wird neu erstellt.

Viele der vorhandenen DOM-Elemente werden wiederverwendet und nur einige Werte darin werden überschrieben, und die Entscheidung wird für jedes Element in der Liste separat getroffen.

Um diese Entscheidung treffen zu können, muss Angular jedes Listenelement eindeutig identifizieren, denn wenn wir zum Beispiel eine neue Liste mit einer anderen Reihenfolge übergeben, wird Angular versuchen, die Elemente zu identifizieren und die DOM-Elemente der Liste neu anzuordnen, ohne sie zu löschen und neu zu erstellen.

Wie werden Listenelemente standardmäßig verfolgt?

ngFor verfolgt Listenelemente standardmäßig über die Objektidentität. Das bedeutet, dass, wenn Sie eine neue Liste von Objekten von Grund auf mit den exakt gleichen Werten wie die vorherige Liste erstellen und diese neu erstellte Liste an ngFor übergeben, Angular nicht in der Lage ist, zu erkennen, ob ein bestimmtes Listenelement bereits vorhanden ist oder nicht.

Aus Sicht der Objektidentität enthält die neue Liste einen völlig neuen Satz von Elementen, der sich von dem vorherigen Satz unterscheidet. Das ist zum Beispiel der Fall, wenn wir die Daten erneut aus dem Backend abfragen.

Das Tracking nach Objektidentität ist eine gute Standardstrategie, da Angular keine Informationen über das Objekt hat und daher nicht sagen kann, welche Eigenschaft es für das Tracking verwenden soll.

Warum kann das für die Performance wichtig sein?

Wie wir sehen, macht ngFor bereits eine Menge Optimierungen out-of-the-box, um zu versuchen, bestehende DOM-Elemente so weit wie möglich wiederzuverwenden, aber es tut dies auf Basis der Objektidentität.

Im Falle von Templates mit großen Listen oder Listen, die einen großen Teil des Bildschirms einnehmen, könnten wir selbst mit diesen Optimierungen immer noch auf Performance-Probleme stoßen und feststellen, dass das UI aufgrund der großen Menge an DOM-Elementen, die erstellt und zerstört werden, langsam ist.

Wenn das der Fall ist, können wir ngFor so konfigurieren, dass die Verfolgung durch etwas anderes als die Objektidentität erfolgt.

Wie verwendet man trackBy?

Wir können unseren eigenen Mechanismus zur Verfolgung von Elementen in einer Liste bereitstellen, indem wir trackBy verwenden. Wir müssen eine Funktion an trackBy übergeben, und die Funktion nimmt ein paar Argumente entgegen, nämlich einen Index und das aktuelle Element:

Diese Implementierung würde die Verfolgung basierend auf der Eigenschaft id durchführen.

Wann sollte trackBy verwendet werden?

Die Verwendung von trackBy ist eine Performance-Optimierung und wird normalerweise nicht standardmäßig benötigt, sondern im Prinzip nur, wenn es zu Performance-Problemen kommt.

Sagen wir, Sie liefern an alte mobile Browser oder alte Versionen des IE: Sie könnten in Betracht ziehen, trackBy als Vorsichtsmaßnahme in Ihren größeren Tabellen anzuwenden, aber es hängt wirklich von Ihrem System und dem Anwendungsfall ab.

Ist ngFor nur für Arrays?

In diesem Beispiel haben wir an ngFor ein Array von Javascript-Objekten übergeben, aber eigentlich müssen wir nicht unbedingt ein Array an ngFor übergeben, damit es funktioniert.

Wir können jede Art von Javascript-Iterable im Allgemeinen übergeben, einschließlich Iterables, die vom Framework selbst erstellt werden. Um dies zu veranschaulichen, definieren wir eine Direktive für ein Konfigurationselement namens hero:

Wir können dieses Konfigurationselement nun auf folgende Weise in unserem Template verwenden:

Nun lassen Sie uns diese Daten aus den Konfigurationselementen mit @ContentChildren abfragen:

Sehen Sie, was hier passiert? Es stellt sich heraus, dass das QueryList eine Klasse ist, die Teil von Angular ist und selbst ein Iterable ist! Obwohl wir es also programmatisch in der Komponentenklasse verwenden können, können wir es auch direkt an ngFor übergeben und direkt darüber iterieren.

Und das Gleiche könnte mit jedem anderen Iterable in unserem Programm gemacht werden.

Ich hoffe, der Beitrag hat Ihnen gefallen, ich lade Sie ein, einen Blick auf die Liste unten zu werfen, in der Sie weitere ähnliche Beiträge und Ressourcen zu Angular finden.

Und wenn Sie mehr über fortgeschrittene Angular-Core-Features wie ngFor wissen möchten, empfehlen wir Ihnen den Angular-Core-Deep-Dive-Kurs, in dem wir alle Angular-Core-Direktiven im Detail behandeln.

Ich lade Sie ein, unseren Newsletter zu abonnieren, um benachrichtigt zu werden, wenn weitere Beiträge wie dieser erscheinen:

Wenn Sie gerade erst anfangen, Angular zu lernen, werfen Sie einen Blick auf den Kurs Angular für Einsteiger:

Angular ngFor – Lernen Sie alle Funktionen einschließlich trackBy, warum ist es nicht nur für Arrays?