Ng-If in Angular mit mehreren Bedingungen

1. Funktionieren von ng-if in AngularJS
2. <ng-template> in AngularJS
3. Verwenden von ngIf mit mehreren Bedingungen
4. Strings auf Gleichheit mit *ngIf vergleichen

Eine ngIf-Direktive ist ein mächtiges Werkzeug in AngularJS (https://angular.io/features), mit dem Sie HTML-Inhalte dynamisch ein- und ausblenden können. Es kann auch Inhalte basierend auf einem Ausdruck ein- oder ausblenden. Wenn die Anweisung der ng-if-Direktive einen WAHR-booleschen Wert ergibt, wird das Element in die HTML-Ansicht eingefügt; Andernfalls wird es vollständig aus dem DOM gelöscht. In diesem Artikel wird das AngularJS ng-if mit mehreren Bedingungen besprochen.

Syntax:

<element ng-if="expression"**>
</element>**

Funktionieren von ng-if in AngularJS

Es ist wichtig zu verstehen, dass alle vom AngularJS-Framework bereitgestellten In-Built-Anweisungen im AngularJS-Framework immer mit dem Präfix ng gekennzeichnet werden. Die Anweisung der ng-if-Direktive ergibt einen booleschen Wert, wie True oder False, und das Element wird entsprechend diesem Wert im HTML-DOM angezeigt.

Wenn die Auswertung des ng-if-Ausdrucks einen False-Wert zurückgibt, wird das Element aus dem DOM gelöscht. Zu beachten ist auch, dass beim Entfernen eines HTML-Elements mit ngIf dessen Gültigkeitsbereich zerstört wird und beim erneuten Einfügen des Elements in die Ansicht ein neuer Gültigkeitsbereich festgelegt wird.

Hier müssen Sie den Unterschied zwischen der Angulardirektive ng-if und ng-show verstehen, bevor Sie in die Tiefe gehen.

Wenn die Ausdrucksauswertung der ng-if-Direktive FALSE ist, wird das Element aus dem DOM entfernt; Wenn jedoch die Ausdrucksauswertung der ng-show-Direktive FALSE ist, wird das Element im DOM ausgeblendet, anstatt entfernt zu werden, was mithilfe des CSS-Attributs von display hidden erfolgt.

Beispiel

Wenn Sie einen PHP-Hintergrund haben, können Sie if-else-Blöcke direkt in HTML-Vorlagen schreiben, wie unten gezeigt.

if(display){
  <div>I am here</div>
}

else{
  <div>
   I am not here
  </div>
 }

Allerdings können wir in HTML keine Klammern verwenden, um if-else-Blöcke zu schreiben, da nur Markup-Elemente in die HTML-Datei aufgenommen werden sollten. Die ideale Lösung besteht darin, if else Bedingungsblöcke durch etwas zu ersetzen.

<ng-template> in AngularJS

Haben Sie vor der grundlegenden Direktive ngIf schon einmal ein Sternchen (*) in Betracht gezogen? Verwendung von HTML-Elementen in der *ngif-Direktive umschließt Angular dieses Element mit der bereitgestellten Bedingung in einem <ng-template>-Tag. Um mehr über ng-template zu erfahren, hier klicken.

<ng-template [ngIf]="display">

  <div>I am Playing</div>

</ng-template> 

Im Angular-Framework ist <ng-template> ein Pseudo-Element, das nicht in die endgültige HTML-Ausgabe aufgenommen wird. Es werden nur die Elemente innerhalb des <ng-template> eingefügt. Wenn das Element Eigenschaften hat, wie z. B. eine ID oder eine Klasse, verwenden Sie diese. Diese Elemente werden an das Element <div> innerhalb der <ng-template> angehängt.

<div *ngIf="display" class="information" id="info">
  I am Playing
</div> 
 
 <ng-template [ngIf]="display">
    <div class="information" id="info">
      I am Playing
    </div>
 </ng-template>

Verwenden von ngIf mit mehreren Bedingungen

Lassen Sie uns die folgenden Bedingungen von AngularJS ng-if diskutieren.

Die erste ist die UND-Bedingung, die zweite die OR-Bedingung und die dritte die NICHT-Bedingung.

UND-Bedingung in *ngIf (&&)

Um die Glaubwürdigkeit einer *ngIf-Aussage zu bestimmen, können wir zahlreiche Bedingungen mit dem logischen Operator AND (&&) verwenden. Das Element wird dem DOM hinzugefügt, wenn alle Bedingungen erfüllt sind. Das folgende Beispiel zeigt, wie AngularJS eine AND-Bedingung auswertet:

<div *ngIf="isCar && isBike">

 <span>{{Name}}</span>

</div>

OR-Bedingung in *ngIf (||)

Wenn nur eine der Bedingungen wahr ist, können Sie mit *ngIf das Element mit Hilfe des Operators OR (||) anzeigen. Das folgende Code-Snippet demonstriert die Verwendung der OR-Bedingung in ngIf.

 <div *ngIf="isCar || isBike">
   // Show Price comparison chart
 </div>

OR-Bedingung in *ngIf (!)

Um die *ngIf-Bedingung umzukehren, können wir den NOT-Operator (!) wie unten gezeigt verwenden.

<div *ngIf="!isCar">
	//Show the Prices of Bikes
</div>

Strings auf Gleichheit mit *ngIf vergleichen

Innerhalb der *ngIf-Anweisung können wir die Operatoren double equal(==) oder triple equal(===) anwenden, um Strings auf Gleichheit zu vergleichen.

Beim Vergleichen von Zeichenketten auf Gleichheit ist es einfach, doppelt gleich oder dreifach gleich zu verwenden oder zu vergessen, und stattdessen den Zuweisungsoperator (einfach gleich) zu verwenden.

Wenn Sie einen Zuweisungsoperator innerhalb von *ngIf verwenden, erhalten Sie den Fehler Parser Error: Bindings cannot contain assignments at column, wie unten zu sehen ist.

<div *ngIf="Items.type = 'Cosmetics'">
// Show the Cosmetics items
</div>

Beim Vergleich einer statischen Zeichenfolge innerhalb eines *ngIf sollten Anführungszeichen verwendet werden. Beim Vergleichen von Zeichenkettenvariablen von Komponenten müssen keine Anführungszeichen verwendet werden.