Die for-Schleife in Angular

AngularJS und modernes Angular verwenden unterschiedliche Vorlagen-APIs: AngularJS nutzt ng-repeat, während modernes Angular den Block @for in Versionen unterstützt, die diese Syntax enthalten. Für die Verarbeitung von JavaScript-Arrays in der Anwendungslogik eignen sich eine for-Schleife oder forEach; damit werden Daten verarbeitet, aber nicht selbstständig Vorlagenelemente gerendert.

Angular-Version bestimmen, bevor Sie eine Schleife auswählen

Stellen Sie zunächst fest, welches Framework das Projekt verwendet. AngularJS ist das ältere Framework und rendert Elemente einer Sammlung mit der Direktive ng-repeat. Modernes Angular verwendet ein anderes Vorlagensystem. Unterstützt die Angular-Version Ihres Projekts @for, können Sie diesen Block zum Rendern einer Sammlung verwenden. Prüfen Sie vor der Verwendung, welche Syntax Ihre Projektversion unterstützt.

Eine JavaScript-for-Schleife oder forEach gehört in die Komponenten- oder Controllerlogik, wenn Sie Werte berechnen, umwandeln oder anderweitig verarbeiten möchten. Zum Rendern einer Sammlung verwenden Sie die Vorlagen-API, die zum Framework passt.

Eine Liste in AngularJS mit ng-repeat rendern

In einer AngularJS-Vorlage erstellt ng-repeat="item in items" für jeden Wert in items eine Kopie des Elements. Das Vorlagenfragment <ul><li ng-repeat="item in items">{{ item }}</li></ul> rendert beispielsweise eine Liste aus einer Sammlung, die vom Controller oder Scope bereitgestellt wird. Ist items auf ['Apple', 'Banana', 'Cherry'] gesetzt, enthält die Seite für jede Frucht einen Listeneintrag. Dies ist eine AngularJS-Direktive und keine Syntax des modernen Angular.

Eine Liste in modernem Angular mit @for rendern

In einem modernen Angular-Projekt, dessen Version den Block @for unterstützt, kann eine Vorlage innerhalb eines Listenelements @for (item of items; track item.id) { <li>{{ item.name }}</li> } verwenden. Dabei ist items die Sammlung der Komponente und item der aktuelle Datensatz. Mit track item.id erhält jeder Datensatz eine stabile Identität, wenn sich die Sammlung ändert. Verwenden Sie einen eindeutigen Schlüssel aus Ihren Daten und passen Sie die Eigenschaftsnamen an die Komponente an. Dieses Beispiel veranschaulicht lediglich die Syntax und wurde für diesen Artikel nicht in einem Angular-Projekt ausgeführt. Prüfen Sie sie daher anhand der Version und Vorlagenkonfiguration Ihres Projekts.

JavaScript-for und forEach zur Verarbeitung von Arrays verwenden

Verwenden Sie eine imperative JavaScript-Schleife, wenn Sie Werte in der Anwendungslogik berechnen oder umwandeln möchten. Das folgende Beispiel summiert eine Sammlung von Preisen. Es ist eine eigenständige JavaScript-Illustration und wurde für diesen Artikel nicht ausgeführt.

const items = [
  { name: 'Notebook', price: 4 },
  { name: 'Pen', price: 2 }
];

let total = 0;
for (const item of items) {
  total += item.price;
}

console.log(`Total: $${total.toFixed(2)}`);

Die Schleife liest jedes Element und addiert dessen Preis zu total; die letzte Zeile gibt den formatierten Betrag in der JavaScript-Konsole aus. Für eine Aktion auf jedem Array-Element ist auch ein forEach-Callback möglich, zum Beispiel items.forEach(item => console.log(item.name)). Beide Varianten eignen sich zur Datenverarbeitung. Sollen Elemente in einer Vorlage gerendert werden, verwenden Sie ng-repeat oder einen von Ihrem Projekt unterstützten @for-Block.

Die passende Schleife für die jeweilige Aufgabe auswählen

Vorlagendirektiven und -blöcke verbinden Sammlungsdaten mit gerenderten Elementen. JavaScript-Schleifen führen Anwendungslogik aus. Änderungen an den Daten sollten über den Komponenten- oder Controllerzustand vorgenommen werden, den die Vorlage verwendet.

Häufige Fragen zu Schleifen in Angular

Ist ng-repeat in modernem Angular verfügbar?

ng-repeat ist eine AngularJS-Direktive. Modernes Angular verwendet eine eigene Vorlagensyntax, darunter @for in Versionen, die diese Syntax unterstützen.

Kann ich eine JavaScript-for-Schleife in einer Angular-Komponente verwenden?

Ja. Verwenden Sie sie in der Komponentenlogik für Berechnungen oder andere Array-Verarbeitungen. Sie erzeugt keine Vorlagenelemente. Binden Sie die resultierenden Daten an die Vorlage und verwenden Sie deren Renderingsyntax.

Wann sollte ich forEach verwenden?

Verwenden Sie forEach, wenn ein Callback für jedes Array-Element ausgeführt werden soll. Eine normale for-Schleife eignet sich, wenn die Logik eine explizite Kontrolle über den Schleifendurchlauf erfordert. Keine der beiden Varianten ist eine Direktive zum Rendern von Vorlagen.

Wie füge ich ein Element zu einer angezeigten Sammlung hinzu?

Aktualisieren Sie die Sammlung in der Komponente oder im Controller und lassen Sie anschließend die passende Vorlagensyntax die aktuellen Werte rendern. Welche Aktualisierungsmethode geeignet ist, hängt davon ab, wie die Anwendung ihren Zustand verwaltet.