So verwenden Sie die ngFor-Angular-Direktive

Angular verwendet Direktiven, um bestimmte HTML-Elemente auf Ihrer Website dynamisch zu rendern. Eine der Strukturdirektiven, die Sie verwenden können, ist ngFor.

Mit der ngFor-Direktive können Sie denselben Block eine bestimmte Anzahl von Malen wiederholen oder ein Array von Objekten durchlaufen, um ihre Details anzuzeigen. Es ist ein leistungsstarkes Werkzeug, mit dem Sie sogar Objekte in anderen Objekten rendern können.

Es hat auch viele Funktionen, die in bestimmten Szenarien nützlich sein können. Dazu gehört das Finden des ersten und letzten Elements oder das Überspringen bestimmter Elemente.

So verwenden Sie ngFor, um statische Zahlen zu durchlaufen

Die ngFor-Direktive basiert auf der for-Schleife, einer von viele nützliche Schleifen, die JavaScript unterstützt

1. Sie können eine Liste innerhalb der ngFor-Anweisung selbst erstellen. Der folgende Code wiederholt einen Absatz fünfmal, wobei die Indizes 0 bis 4 verwendet werden:

   <div *ngFor='let item of [0, 1, 2, 3, 4]; sei i = index'>
   <p> Dies ist ein wiederholter Absatz: {{item}} </p>
   </div>

2. Da die obige Methode möglicherweise nicht für große Arrays geeignet ist, können Sie ein Array auch dynamisch in der TypeScript-Datei erstellen:

   Export KlasseBeispielKlasseimplementiertOnInit{
    Zahlen: Array<Nummer> = [];
   Konstrukteur() {
   // Dadurch wird dynamisch das folgende Array erstellt:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   Dies.Zahlen = Array(10).füllen(1).map((x, i)=>i);
    }
   }

3. Sie können dann das Zahlenarray im HTML durchlaufen:

   <div *ngFor='lass Nummern; sei i = index'>
   <p>Dies ist ein wiederholter Absatz: {{item}}</p>
   </div>

Wie man bestimmte Zahlen überspringt oder formatiert

Du kannst den... benutzen seltsam oder eben ngFor-Variablen zur Bestimmung jeder zweiten Zahl. Ein Szenario, in dem Sie dies möglicherweise nützlich finden, ist, wenn Sie jede ungerade oder gerade Zeile in einer Tabelle mit einer anderen Farbe formatieren möchten.

1. Fügen Sie in der CSS-Datei für eine Komponente einige neue CSS-Klassen hinzu. Dies sind die Stile, die Sie für bestimmte Elemente bei geraden oder ungeraden Indizes verwenden werden:

   .rot {
    Farbe Rot;
   }
   .blau { 
    Farbe blau; 
   }
   

2. Deklarieren Sie ungerade und gerade Variablen innerhalb der ngFor-Anweisung. Dies sind Variablen, die Angular erkennt. Weisen Sie geraden Zahlen die rote CSS-Klasse und ungeraden Zahlen die blaue CSS-Klasse zu:

   <div *ngFor='lass Nummern; lass ungerade = ungerade; lass gerade = gerade' [ngClass]="{rot: gerade, blau: ungerade}">
   <p> Dies ist ein wiederholter Absatz: {{item}} </p>
   </div>

3. Führen Sie Ihre Angular-Website mit aus ng dienen und im Webbrowser öffnen. Gerade und ungerade HTML-Elemente wechseln je nach CSS-Klasse zwischen den verschiedenen Stilen:
4. Wenn Sie jede gerade Zahl vollständig überspringen möchten, können Sie die ngIf-Direktive verwenden. Dadurch werden alle ungeraden Zahlen übersprungen und nur gerade Zahlen angezeigt:

   <div *ngFor='lass Nummern; lass gerade = gerade'>
   <p *ngIf='eben'> Dies ist ein wiederholter Absatz: {{item}} </p>
   </div>

Wie man rückwärts zählt

Um rückwärts zu zählen, können Sie traditionelle Methoden wie das Umkehren einer Liste oder das Rückwärtszählen durch die Schleife mit einem Index verwenden.

1. Deklarieren Sie eine Indexvariable in der ngFor-Anweisung. Beginnen Sie innerhalb des ngFor mit der Länge des Arrays und ziehen Sie die Anzahl der Elemente ab, die Sie bereits durchlaufen haben:

   <div *ngFor="lass Nummern; sei i = Index;">
   <p> Dies ist ein wiederholter Absatz: {{numbers.length-i-1}} </p>
   </div>

2. Sie können auch eine umgekehrte Liste in der TypeScript-Datei erstellen:

   Export KlasseBeispielKlasseimplementiertOnInit{
    Zahlen: Array<Nummer> = [];
    reversedList: Array<Nummer> = [];
   Konstrukteur() {
   Dies.Zahlen = Array(10).füllen(1).map((x, i)=>i);
   Dies.reversedList = Dies.numbers.slice().reverse();
    }
   }

3. Iterieren Sie mit ngFor über die umgekehrte Liste:

   <div *ngFor='let item of reversedList; sei i = index'>
   <p> Dies ist ein wiederholter Absatz: {{item}} </p>
   </div>

So gestalten Sie das erste und letzte Element unterschiedlich

Sie können das erste und letzte Element separat von den anderen Elementen formatieren, indem Sie verwenden Erste und letzte Winkelvariablen. Dies ist eine Alternative zu mit CSS-Pseudo-Klassen wie :erstes Kind.

1. Deklarieren Sie in der ngFor-Anweisung die erste und letzte Variable. Verwenden Sie die Direktive ngClass, um die blauen und roten CSS-Klassen in den vorherigen Schritten zuzuweisen. Weisen Sie dem ersten Element die blaue CSS-Klasse und dem letzten Element die rote CSS-Klasse zu:

   <div *ngFor='lass Nummern; lass zuerst = zuerst; let last = last' [ngClass]= "{blau: zuerst, rot: zuletzt}">
   <p> Dies ist ein wiederholter Absatz: {{item}} </p>
   </div>

So verwenden Sie ein ngFor zum Iterieren über Objekte

Sie können die ngFor-Direktive verwenden, um Objekte zu durchlaufen und auf ihre einzelnen Variablen zuzugreifen.

1. Erstellen Sie eine Liste von Objekten in der TypeScript-Datei. In diesem Fall wird eine Liste von Personen mit ihren Details angezeigt:

   Export KlasseBeispielKlasseimplementiertOnInit{
    Menschen = []; 
   Konstrukteur() {
   Dies.Leute = [
    { Vorname: 'John', Nachname: 'Schmied', Besetzung: 'HR Manager', startDate: neues Datum("2019-02-05") },
    { Vorname: 'Maria', Nachname: 'Johnson', Besetzung: 'Technischer Offizier', startDate: neues Datum("2016-01-07") },
    { Vorname: 'Wilhelm', Nachname: 'Braun', Besetzung: 'Personalreferent', startDate: neues Datum("2018-03-03") },
    ];
    }
   }

2. Verwenden Sie im HTML-Code die ngFor-Schleife, um die Liste der Personen zu durchlaufen. Jede Person wird über das erreichbar sein Person Variable. Sie können die Person-Variable verwenden, um auf die Attribute jeder Person zuzugreifen:

   <div *ngFor='lass Person von Menschen; sei i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{person.beruf}} </p>
   <p> {{person.startDate}} </p>
   </div>

So verwenden Sie ein verschachteltes ngFor, um Objekte in anderen Objekten anzuzeigen

Sie können eine verschachtelte for-Schleife verwenden, um Objekte innerhalb anderer Objekte anzuzeigen.

1. Ändern Sie die Personenliste. Jede Person hat eine Notfallliste mit Kontakten. Speichern Sie jeden Notfallkontakt als separates Objekt:

   Dies.Leute = [
    {
    Vorname: 'John',
    Nachname: 'Schmied',
    Notfallkontakte: [
    { Name: 'Amanda Smith', Beziehung: 'Ehefrau', Telefon: '0441239876' },
    { Name: 'Barry Smith', Beziehung: 'Sohn', Telefon: '0442239876'}
    ]
    },
    {
    Vorname: 'Maria',
    Nachname: 'Johnson',
    Notfallkontakte: [
    { Name: 'Markus Johnson', Beziehung: 'Ehemann', Telefon: '0443239876' }
    ]
    },
    ];

2. Erstellen Sie im HTML-Code eine verschachtelte Schleife innerhalb Ihrer ursprünglichen Schleife, um jeden Notfallkontakt zu durchlaufen und seine Details anzuzeigen:

   <div *ngFor='lass Person von Menschen; sei i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='Person kontaktieren lassen.Notfallkontakte; sei j = Index'>
   <h5> Notfallkontakte: </h5>
   <p> {{Kontaktname}} </p>
   <p> {{person.beziehung}} </p>
   <p> {{person.phone}} </p>
   </div>
   <Br>
   </div>

Schleifen mit ngFor in Angular

Sie können die ngFor-Strukturdirektive verwenden, um HTML-Elemente auf Ihrer Website dynamisch zu durchlaufen. Auf diese Weise können Sie denselben Block für eine Reihe von Objekten oder für eine bestimmte Anzahl von Malen wiederholen.

Sie können es auch für andere Tricks verwenden, z. B. das Überspringen jeder geraden oder ungeraden Zahl oder das Gestalten des ersten und letzten Elements. Sie können es auch verwenden, um viele Objekte innerhalb anderer Objekte dynamisch zu rendern.

Es gibt andere Angular-Direktiven, die Sie verwenden können, um Ihre Website dynamischer zu gestalten. Dazu gehören ngIf, ngSwitch, ngStyle, ngClass und ngModel.