Schleifen mit @for
Rendern Sie Listen mit @for und Track-Ausdrücken.
Schleifen mit @for ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Schleifen mit for
Der at-for-Block wiederholt Inhalte für jedes Element einer Sammlung. Er ersetzt die alte Direktive star-ngFor und erfordert einen track-Ausdruck.
Grundlegende for-Syntax
Schreiben Sie ein At-Zeichen, das Wort for, anschließend item of items sowie eine erforderliche track-Klausel, die einen eindeutigen Schlüssel angibt.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }Warum track erforderlich ist
Der track-Ausdruck teilt Angular mit, wie die einzelnen Elemente bei Änderungen identifiziert werden. Dadurch können DOM-Knoten wiederverwendet werden, statt sie neu zu erstellen. Das verbessert die Leistung deutlich.
Nach Identität verfolgen
Wenn Elemente keine stabile id besitzen, beispielsweise bei einer Liste primitiver Zeichenfolgen, können Sie stattdessen nach dem Element selbst verfolgen.
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }Der empty-Block
Ein at-empty-Block wird gerendert, wenn die Sammlung keine Elemente enthält. Er folgt auf die schließende Klammer des at-for-Blocks.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }Kontextvariablen
Innerhalb eines at-for-Blocks stehen hilfreiche Variablen zur Verfügung, darunter index, count, first, last, even und odd. Binden Sie sie mit let.
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }Die Variable index
Der Wert dollar-index gibt die nullbasierte Position des aktuellen Elements an und wird häufig, wie oben gezeigt, mit einem Alias an eine lokale Variable gebunden.
first und last
Die booleschen Werte dollar-first und dollar-last sind für das erste beziehungsweise letzte Element true und eignen sich beispielsweise für Formatierungen oder Trennzeichen.
even und odd
Die booleschen Werte dollar-even und dollar-odd helfen bei der abwechselnden Formatierung von Zeilen.
Über ein Signal iterieren
Die Sammlung kann aus einem Signal stammen. Rufen Sie es einfach im for-Ausdruck auf.
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }Leistungsvorteil
Da track verpflichtend ist, ist der neue at-for-Block schneller als star-ngFor ohne trackBy, weil Angular immer weiß, wie Elemente den DOM-Knoten zugeordnet werden.
Schnelltest: Schleifen
Die Voraussetzung für den for-Block.
Zusammenfassung: Schleifen
Sie haben den at-for-Block mit seinem erforderlichen track-Ausdruck, den at-empty-Block für leere Sammlungen und Kontextvariablen wie index, first, last, even und odd kennengelernt. Er ersetzt star-ngFor. Als Nächstes geht es mit at-switch um Fallunterscheidungen.
Häufig gestellte Fragen
Ist die Lektion „Schleifen mit @for“ kostenlos?
Ja — der vollständige Text von „Schleifen mit @for“ 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 „Schleifen mit @for“?
Rendern Sie Listen mit @for und Track-Ausdrücken. 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 2 von 4.
Wie lange dauert die Lektion „Schleifen mit @for“?
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.