forEach in Angular

1. Verwendung von .forEach() in Angular
2. Verwenden der *ngFor-Schleife in Angular

Wir werden die Funktion .forEach() in Angular anhand eines Beispiels vorstellen und damit durch Elemente eines Arrays iterieren.

Verwendung von .forEach() in Angular

.forEach() ist eine Funktion in Angular, die für jedes Element in einem Array eine Funktion aufruft.

Es wird nicht für leere Arrays ausgeführt. Es wird nur in .ts-Dateien verwendet und kann in der Vorlage nicht verwendet werden, um Informationen in Vorlagendateien in Angular anzuzeigen.

Die Syntax von .forEach() ist sehr einfach. Beginnen wir mit einem Beispiel, indem wir mit dem folgenden Befehl eine neue Anwendung erstellen.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis:

# angular
cd my-app

Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# angular
ng serve --open

Wir erstellen ein Array von Zahlen von 1 bis 10.

# Angular
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Lassen Sie uns die Funktion .forEach() verwenden, um das Array einzeln zu console.log. Also erstellen wir eine weitere Variable, num.

# Angular
num = this.numbers.forEach(x => console.log(x));

Ausgabe:

Wie im obigen Beispiel zu sehen ist, können wir .forEach() verwenden, um eine Funktion für jedes Element eines Arrays aufzurufen. Rufen wir eine Funktion auf diesem Array auf, anstatt nur console.log zu verwenden.

In dieser Funktion nehmen wir die Variable x als Parameter, der die Elemente des Arrays sein wird, und wir fügen ihnen 10 hinzu, um sie zurückzugeben.

# Angular
function(x){
    x = x + 10; 
    console.log(x);
  }

Wir werden nun .forEach() verwenden, um diese Funktion für jedes Element unseres Arrays numbers aufzurufen.

# Angular
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
num = this.numbers.forEach(x => this.function(x));

Ausgabe:

Wie im obigen Beispiel zu sehen, funktionierte die Funktion, die wir an alle Elemente eines Arrays übergeben haben, und fügte 10 in jedes Element eines Arrays ein. Aber wir können die Funktion .forEach() nicht auf Vorlagendateien verwenden, um die Elemente eines Arrays zu durchlaufen.

Wenn wir die Elemente eines Arrays oder einer Liste von Vorlagendateien durchlaufen möchten, können wir die *ngFor-Schleife verwenden.

Verwenden der *ngFor-Schleife in Angular

Das *ngFor ist eine for-Schleife in Angular, die Elemente eines Arrays, einer Liste oder eines Objekts durchläuft, und es kann für Vorlagendateien verwendet werden, um eine Liste von Daten in unserer Webanwendung oder Website anzuzeigen.

Wir werden ein Beispiel durchgehen, in dem wir eine Liste weit verbreiteter Programmiersprachen erstellen und diese Liste in einer Vorlagendatei mit der *ngFor-Schleife anzeigen.

Lassen Sie uns eine neue Anwendung erstellen, indem Sie den folgenden Befehl verwenden.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# angular
cd my-app

Lassen Sie uns unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# angular
ng serve --open

Wir erstellen eine Klassendatei language.ts, in der wir einen Konstruktor für eine Sprache erstellen. Der Code in language.ts sieht also wie folgt aus.

# angular
export class Language {
  constructor(public name: string, public version: string) {}
}

In app.component.ts importieren wir Language.

# angular
import { Language } from './language';

Wir werden eine Liste von Programmiersprachen erstellen.

# angular
ProgrammingLanguages: Language[] = [
    new Language('Angular', '13.1'),
    new Language('React', '17'),
    new Language('Vue', '3.2'),
    new Language('Node', '17'),
  ];

In unserem Template app.component.html zeigen wir unsere Liste mit der Schleife *ngFor an.

# angular
<main>
  <h2>Widely Used Programming Languages</h2>
  <section>
    <div *ngFor="let language of ProgrammingLanguages">
      <div class="list">
        <h2>{{ language.name }}</h2>
        <p>{{ language.version }}</p>
      </div>
    </div>
  </section>
</main>

In app.component.css werden wir etwas CSS schreiben, damit unsere Ausgabe sauber und leicht verständlich aussieht.

# angular
.list {
  padding: 5px;
  text-align: center;
  background-color: white;
  border: 1px solid black;
  margin-bottom: 5px;
  margin-left: 5px;
  width: 45%;
  float: left;
}

Ausgabe:

In diesem Tutorial lernen wir, wie wir die Funktion .forEach() verwenden können, um Elemente eines Arrays in typescript-Dateien zu durchlaufen, und wie wir die Schleife *ngFor verwenden können, um Elemente eines Arrays zu durchlaufen , Objekt oder eine Liste in Vorlagendateien und Anzeigedaten im Frontend unserer Webanwendungen oder Websites.