Die if...else-Anweisung in Angular

Wir werden vorstellen, wie man if-Anweisungen in Angular Anwendungen verwendet und Beispiele diskutieren.

Verwendung der if-Anweisung in Angular

Beim Programmieren sind if-Anweisungen logische Blöcke. Diese bedingten Anweisungen teilen dem Computer mit, was zu tun ist, wenn eine bestimmte Bedingung wahr oder falsch ist.

In der modernen Ära der Webanwendungen machen if-Anweisungen das Leben von Programmierern leichter verständlich, wann ein bestimmter Codeblock basierend auf den Bedingungen ausgeführt werden muss.

Es gibt verschiedene Möglichkeiten, if-Anweisungen in Angular zu verwenden, indem wir *ng-if oder eine andere einfache Methode verwenden, die wir in einem Beispiel besprechen werden.

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 nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# angular
ng serve --open

Dann setzen wir in app.component.ts eine Variable statement auf false. Wir werden diese Variable verwenden, um unseren Code auszuführen.

# angular
statement = false;

Jetzt erstellen wir in app.component.html eine Vorlage mit der Variablen statement, die den Inhalt anzeigt, dass die Aussage wahr ist, wenn wir die Variable auf true gesetzt haben.

Es wird angezeigt, dass die Aussage falsch ist, wenn wir die Variable auf false gesetzt haben.

# angular
<hello name="{{ name }}"></hello>
<h2>{{ statement ? 'This statement is True' : 'This statement is false' }}</h2>

Lassen Sie uns unsere Anwendung testen, um zu sehen, ob es funktioniert, wenn Sie den Wert statement ändern.

Ausgabe:

Ändere den Wert der Anweisung, setze ihn auf true und überprüfe, wie es funktioniert.

Ausgabe:

Wie Sie also sehen können, wird der Code ausgeführt und zeigt den Wert an, den wir mit einer einfachen Anweisungsmethode sehen möchten, wenn wir den Wert der Variablen statement ändern.

Stellen wir uns einen Block vor, den wir in einem div anzeigen möchten, in dem die Anweisung if-else ausgeführt wird. Wir können die Anweisung *ng-if verwenden und die IDs auf die Blöcke setzen, die wir anzeigen möchten, wenn die Bedingung richtig oder falsch ist.

Wir werden eine neue Variable element auf 1 setzen. Unser Code in app.component.ts sieht wie folgt aus.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  statement = true;
  element = 1;
}

Erstellen Sie eine Vorlage in app.component.html. Wir haben ein div mit einer *ng-if-Anweisung, die einen Block trueBlock anzeigt, und wenn der Wert von element nicht 1 ist, dann wird der Block mit einer ID von falseBlock angezeigt.

<div *ngIf="element == 1; then trueBlock; else falseBlock"></div>

<ng-template #trueBlock><button>Login</button></ng-template>
<ng-template #falseBlock><button>Logout</button></ng-template>

Lassen Sie uns überprüfen, wie es funktioniert.

Ausgabe:

Versuchen Sie, den Wert des Elements zu ändern und prüfen Sie, wie es funktioniert.

# angular
element = 2;

Ausgabe:

Wie Sie im obigen Beispiel sehen können, können wir die Codeblöcke einfach mit der Anweisung *ng-if anzeigen und die ID des Blocks aufrufen.