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

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

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

Wie kann ich das gleiche Verhalten erreichen ngIf else?

Winkel 4 und 5 :

mit else:

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

<ng-template #other_content>other content here...</ng-template>

Sie können auch verwenden then else:

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

oder thenalleine:

<div *ngIf="isValid;then content"></div>    
<ng-template #content>content here...</ng-template>

Demo:

Plunker

Einzelheiten:

<ng-template>: ist Angulars eigene Implementierung des <template>Tags gemäß MDN :

Das HTML- <template>Element ist ein Mechanismus zum Speichern von clientseitigem Inhalt, der beim Laden einer Seite nicht gerendert werden soll, sondern anschließend zur Laufzeit mithilfe von JavaScript instanziiert werden kann.

In Angular 4.xx können Sie ngIf auf vier Arten verwenden , um ein einfaches if else-Verfahren zu erreichen:

1. Verwenden Sie einfach If

   <div *ngIf="isValid">
       If isValid is true
   </div>
   

2. Verwenden von If with Else (Bitte beachten Sie templateName )

   <div *ngIf="isValid; else templateName">
       If isValid is true
   </div>
   
   <ng-template #templateName>
       If isValid is false
   </ng-template>
   

3. Verwenden von If with Then (Bitte beachten Sie templateName )

   <div *ngIf="isValid; then templateName">
       Here is never showing
   </div>
   
   <ng-template #templateName>
       If isValid is true
   </ng-template>
   

4. Verwenden von If with Then und Else

   <div *ngIf="isValid; then thenTemplateName else elseTemplateName">
       Here is never showing
   </div>
   
   <ng-template #thenTemplateName>
       If isValid is true
   </ng-template>
   
   <ng-template #elseTemplateName>
       If isValid is false
   </ng-template>
   

Tipp: ngIf wertet den Ausdruck aus und rendert dann die Vorlage then oder else an ihrer Stelle, wenn der Ausdruck wahr bzw. falsch ist. Typischerweise die:

• Dann ist die Vorlage die Inline-Vorlage von ngIf sofern sie nicht an einen anderen Wert gebunden ist.
• Andernfalls ist die Vorlage leer, sofern sie nicht gebunden ist.

Um mit Observable zu arbeiten, mache ich das normalerweise, um anzuzeigen, ob das Observable-Array aus Daten besteht.

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>

"bindEmail" prüft, ob E-Mails verfügbar sind oder nicht. Wenn eine E-Mail vorhanden ist, wird Logout angezeigt, andernfalls wird Login angezeigt

<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>

Sie können dies verwenden <ng-container>und <ng-template>erreichen

<ng-container *ngIf="isValid; then template1 else template2"></ng-container>

<ng-template #template1>
     <div>Template 1 contains</div>
</ng-template>

<ng-template #template2>
     <div>Template 2 contains </div>
</ng-template>

Die Stackblitz Live-Demo finden Sie unten

Live-Demo

Hoffe das wird helfen ... !!!

Für Angular 9/8

Quelle Verbindung mit den Beispielen

    export class AppComponent {
      isDone = true;
    }

1) * ngIf

    <div *ngIf="isDone">
      It's Done!
    </div>

    <!-- Negation operator-->
    <div *ngIf="!isDone">
      It's Not Done!
    </div>

2) * ngIf und Else

    <ng-container *ngIf="isDone; else elseNotDone">
      It's Done!
    </ng-container>

    <ng-template #elseNotDone>
      It's Not Done!
    </ng-template>

3) * ngIf, Then and Else

    <ng-container *ngIf="isDone;  then iAmDone; else iAmNotDone">
    </ng-container>

    <ng-template #iAmDone>
      It's Done!
    </ng-template>

    <ng-template #iAmNotDone>
      It's Not Done!
    </ng-template>

Syntax für ngIf / Else

<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>

Verwenden der expliziten Syntax NgIf / Else / Then

Um diese Vorlage hinzuzufügen, müssen wir sie nur explizit an eine Vorlage binden.

<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div> 
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>

Observables mit NgIf und Async Pipe

Für mehr Details

Fügen Sie einfach neue Updates von Angular 8 hinzu.

1. In diesem Fall können wir ngIf und ngIfElse verwenden .

<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

2. Wenn dies der Fall ist, können wir ngIf und ngIfThen verwenden .

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>

3. Für den Fall, dass mit then und else, können wir ngIf , ngIfThen und ngIfElse verwenden .

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

In Angular 4.0 if..elseähnelt die Syntax den bedingten Operatoren in Java.

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

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

Der resultierende Wert des ngif-Ausdrucks ist nicht nur der boolesche Wert true oder false

Wenn der Ausdruck nur ein Objekt ist, bewertet er ihn dennoch als Wahrhaftigkeit.

Wenn das Objekt undefiniert oder nicht vorhanden ist, bewertet ngif es als Falschheit.

Häufig wird verwendet, wenn ein geladenes Objekt vorhanden ist, der Inhalt dieses Objekts angezeigt wird, andernfalls wird "Laden ......." angezeigt.

 <div *ngIf="!object">
     Still loading...........
 </div>

<div *ngIf="object">
     <!-- the content of this object -->

           object.info, object.id, object.name ... etc.
 </div>

ein anderes Beispiel:

  things = {
 car: 'Honda',
 shoes: 'Nike',
 shirt: 'Tom Ford',
 watch: 'Timex'
 };

 <div *ngIf="things.car; else noCar">
  Nice car!
 </div>

<ng-template #noCar>
   Call a Uber.
</ng-template>

 <!-- Nice car ! -->

Anthoer Beispiel:

<div *ngIf="things.car; let car">
   Nice {{ car }}!
 </div>
<!-- Nice Honda! -->

ngif Vorlage

ngif eckig 4

ng-template

<ng-template [ngIf]="condition1" [ngIfElse]="template2">
        ...
</ng-template>


<ng-template #template2> 
        ...
</ng-template>

Es gibt zwei Möglichkeiten, wenn eine Bedingung für ein HTML-Tag oder Vorlagen vorliegt:

1. * ngIf-Direktive von CommonModule auf HTML-Tag;
2. ansonsten

<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font">    </div>

<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>

In Winkel 4, 5 und 6

Wir können einfach eine Vorlagenreferenzvariable ^[2] erstellen und diese mit der else-Bedingung in einer * ngIf-Direktive verknüpfen

Die möglichen Syntaxen ^[1] sind:

<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>


<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>

<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>


<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>

DEMO: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html

Quellen:

1. https://angular.io/api/common/NgIf#syntax
2. https://angular.io/guide/template-syntax#template-reference-variables--var-

Sie können auch Javascript Short Ternary Conditional Operator verwenden? in eckigen wie folgt:

{{doThis() ? 'foo' : 'bar'}}

oder

<div [ngClass]="doThis() ? 'foo' : 'bar'">

Ich weiß, dass dies eine Weile her ist, möchte es aber hinzufügen, wenn es hilft. Ich habe zwei Flags in der Komponente und zwei ngIfs für die entsprechenden zwei Flags.

Es war einfach und funktionierte gut mit Material, da ng-template und Material nicht gut zusammenarbeiteten.