Wie verwendet man *ngIf else?

Ich verwende Angular und möchte in diesem Beispiel *ngIf else (verfügbar seit Version 4) verwenden:

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

Wie kann ich das gleiche Verhalten mit "ngIf else" erreichen?

Alexander Abakumov
Bearbeitete Frage 8. Oktober 2018 в 9:15
Programmierung
if-statement angular angular-template
24. März 2017 в 6:18
15 Aufrufe
Lösung

Angular 4 und 5:

using else :

<div *ngIf="isValid;else other_content">
    content here ...
</div>

other content here...

Sie können auch then else verwenden:

<div *ngIf="isValid;then content else other_content">here is ignored</div>    
content here...
other content here...

oder then allein :

<div *ngIf="isValid;then content"></div>    
content here...

Demo :

[Plunker][1]

Details:

: ist Angulars eigene Implementierung des-Tags, das nach [MDN][2] :

Das HTML `` Element ist ein Mechanismus, um clientseitige Inhalt, der nicht gerendert werden soll, wenn eine Seite geladen wird, aber möglicherweise später während der Laufzeit mit JavaScript instanziiert werden.

Iswar
Bearbeitete Antwort 25. Juni 2018 в 6:55
Kommentare (12)

"bindEmail" prüft, ob eine E-Mail vorhanden ist oder nicht. Wenn eine E-Mail vorhanden ist, wird Logout angezeigt, ansonsten wird Login angezeigt.

<li *ngIf="bindEmail;then logout else login"></li>
<li><a routerLink="/logout">Logout</a></li>
<li><a routerLink="/login">Login</a></li>
Prashant Shrivastava
Bearbeitete Antwort 23. Juli 2017 в 1:17
Kommentare (1)

In Angular 4.0 ist die "if..else"-Syntax den bedingten Operatoren in Java sehr ähnlich.

In Java verwenden Sie "condition?stmnt1:stmnt2".

In Angular 4.0 verwenden Sie *ngIf="condition;then stmnt1 else stmnt2".

msanford
Bearbeitete Antwort 2. Juni 2017 в 7:25
Kommentare (2)