So verwenden Sie die integrierte Angular-Direktive: ngIf, ngFor, ngClass und mehr

Sie können dem HTML in Ihrem Angular-Projekt Anweisungen hinzufügen. Einige steuern die Struktur Ihres Markups, während sich andere auf Attribute konzentrieren.

In diesem Artikel werden die sechs häufigsten Angular-Direktiven beschrieben: ngFor, ngIf, ngClass, ngStyle, ngModel und ngSwitch.

Was sind Winkeldirektiven?

Mit Angular-Direktiven können Sie if-Anweisungen und for-Schleifen verwenden und dem HTML-Code eines Angular-Projekts andere Verhaltensweisen hinzufügen.

Richtlinie	Beschreibung
*ngIf	Sie können ngIf verwenden, wenn bestimmte HTML-Blöcke nur angezeigt werden sollen, wenn sie eine bestimmte Bedingung erfüllen. Zum Beispiel, wenn Sie ein Formular mit einem Popup hatten, das angezeigt wird, nachdem ein Benutzer Eingaben für ein bestimmtes Feld gemacht hat.
*ngFor	Sie können ngFor verwenden, wenn Sie einen bestimmten Block mehrmals wiederholen müssen. Wenn Sie beispielsweise eine Liste mit Elementen haben und für jedes Element ein div anzeigen müssen.
*ngKlasse	Dies fügt bedingtes Styling mit einer Klasse hinzu. Wenn eine if-Anweisung die Bedingung erfüllt, wird die angegebene Klasse angewendet. instagram viewer
*ngStyle	Dies fügt bedingtes Inline-Styling hinzu. Wenn eine if-Anweisung die Bedingung erfüllt, werden die angegebenen Stile angewendet.
*ngModell	Auf diese Weise können Sie eine Zwei-Wege-Bindung durchführen. Das bedeutet, dass Sie Daten in beide Richtungen zwischen der HTML- und der TypeScript-Datei übertragen können. Beispielsweise können Sie den Wert eines Attributs von der TypeScript-Datei an die HTML-Datei übergeben und umgekehrt.
*ngSwitch	Auf diese Weise können Sie eine switch-Anweisung mit vielen Fällen hinzufügen, um viele Werte zu überprüfen. Basierend auf den Fällen werden bestimmte HTML-Elemente angezeigt.

Strukturdirektiven betreffen die Struktur der HTML-Elemente. Dazu gehören ngIf, ngFor und ngSwitch. Attributdirektiven beinhalten das Ändern der Eigenschaften der HTML-Elemente. Dazu gehören ngStyle, ngClass und ngModel.

So verwenden Sie ngIf

Um ngIf zu verwenden, benötigen Sie eine Bedingung, die als wahr ausgewertet wird, damit ein bestimmtes HTML-Element angezeigt wird.

1. Fügen Sie Ihrer TypeScript-Datei zwei Variablen hinzu. In diesem Beispiel gibt es eine noPlaylists-Variable und eine Variable zum Speichern der Wiedergabelisten. Diese Variable wird als wahr ausgewertet, wenn die Länge des Playlists-Arrays 0 ist.

   noPlaylists: boolean = false;
   Wiedergabelisten: beliebig = [];
   Konstrukteur() { }
    ngOnInit(): void {
    if (this.playlists.length 0) {
    this.noPlaylists = true;
    }
   }
   

2. Fügen Sie im HTML-Code die *ngIf-Anweisung hinzu. Wenn noPlaylists wahr ist, wird die im Abschnitt unten enthaltene Fehlermeldung angezeigt. Andernfalls wird es nicht. Sie können ngIf auf verschiedene Arten von anwenden HTML-Tags.

   
   
   Es sind keine Wiedergabelisten verfügbar.
   
   
   
   

3. Um der if-Anweisung eine „else“-Komponente hinzuzufügen, müssen Sie den HTML-Code für den „else“-Teil in einem Vorlagenblock hinzufügen.

   
   
   Es sind keine Wiedergabelisten verfügbar.
   
   
   
   
   
   
   Wiedergabelisten gefunden.
   
   
   
   

So verwenden Sie ngFor

Wenn Sie eine bestimmte Anzahl von Blöcken auf einer Seite wiederholen müssen, können Sie die ngFor-Direktive verwenden.

1. Fügen Sie in der TypeScript-Datei dem Array Elemente hinzu.

   Wiedergabelisten: alle = [
    {"name": "Rock", "numberOfSongs": 5},
    {"name": "Contemporary", "numberOfSongs": 9},
    {"name": "Beliebt", "numberOfSongs": 14},
    {"name": "Acoustic", "numberOfSongs": 3},
    {"name": "Hochzeitslieder", "numberOfSongs": 25},
    {"name": "Metal", "numberOfSongs": 0},
   ];
   

2. Fügen Sie in der HTML-Datei die *ngFor-Anweisung hinzu.

   Wiedergabelisten gefunden.
   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} Lieder
   
   
   
   
   
   
   

   Innerhalb des ngFor können Sie auf jedes Objekt im Array mit der Variablen „playlist“ verweisen. "playlist.name" und "playlist.numberOfSongs" drucken beide Attribute innerhalb der Schild.

So verwenden Sie ngClass

Sie können die Stilklasse, die ein bestimmtes div verwendet, basierend auf einer Bedingung ändern.

1. Fügen Sie der CSS-Datei zwei Klassen mit unterschiedlichen Stilen hinzu. Sie können jede Art von hinzufügen CSS-Styling Sie möchten, wie z. B. verschiedene Hintergrundfarben.

   .Lieder {
    Hintergrundfarbe: #F7F5F2;
   }
   .noSongs {
    Hintergrundfarbe: #FFA8A8;
   }

2. Fügen Sie innerhalb der for-Schleife aus dem vorherigen Schritt die Attributdirektive ngClass hinzu. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" verwendet dasselbe ternären Operator, der JavaScript und andere Sprachen verwenden.

   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} Lieder
   
   
   
   
   

   Wenn die Anzahl der Songs größer als Null ist, wird die Klasse „Songs“ auf das div angewendet. Dadurch bekommt das div eine graue Hintergrundfarbe. Andernfalls, wenn die Anzahl der Songs null ist, wird die Klasse „noSongs“ auf das div angewendet. Dadurch erhält das div eine rote Hintergrundfarbe.

So verwenden Sie ngStyle

Anstatt ngClass zu verwenden, können Sie ngStyle verwenden, wenn Sie Inline-Styling anstelle von Styles über eine Klasse anwenden möchten.

1. Ändern Sie die ngClass aus dem vorherigen Schritt, um stattdessen ngStyle zu verwenden.

   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} Lieder
   
   
   
   

[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'color': playlist.numberOfSongs > 0? 'schwarz': 'dunkelblau' }"

TeilenTeilenTwitternTeilenEmail

Verwandte Themen

• Programmierung
• Programmierung
• JavaScript
• HTML
• CSS