Wie verwende ich * ngIf else?

630

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?

kawli norman
quelle
1
Überprüfen Sie hier für Angular 8 erklärt mit Beispiel NgIf, NgIf Else und NgIf Then Else freakyjolly.com/…
Code Spy

Antworten:

979

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.

Bougarfaoui El Houcine
quelle
8
Ich hoffte, dass es eine Möglichkeit gibt, <ng-template> ohne ein anderes Tag wie div zu verwenden, aber seltsamerweise ist es nicht ... Ich weiß, dass das <div> entfernt wird, wenn Sie es verwenden, aber es ist irgendwie seltsam als Implementierung, denke ich.
Andreas
20
@andreas Sie können <ng-container>für die if-Klausel verwenden
Martin Schneider
2
Hinweis: Sie können ng-containerfür den Container verwenden, der * ngIf enthält, aber nicht für die Vorlage
Simon_Weaver
@ Simon_Weaver Ich habe es auf die harte Tour herausgefunden. Aber warum? Warum durften sie nicht *ngIf daran arbeiten ng-template?
Eran Medan
<div * ngIf = "isValid; dann Inhalt sonst other_content"> wird hier ignoriert </ div> wird nicht ignoriert. Es ist ein Ort, an dem ng-template injiziert wird
dimson d
185

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.
John Henckel
quelle
Es scheint, dass der Compiler nicht akzeptiert ...; else .... Wahrscheinlich ;sollte das entfernt werden.
Slartidan
5
in ...; else ...
Angular
20

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>
Ah Hiang
quelle
8

"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>
Prashant Shrivastava
quelle
2
Das funktioniert nicht. Wenn es richtig wäre, würde es immer noch keinen Wert hinzufügen, da die akzeptierte Antwort bereits zeigt, wie es geht.
Günter Zöchbauer
8

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 ... !!!

DeC
quelle
8

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>
Code Spy
quelle
Dies wiederholt nur das, was in der akzeptierten Antwort bereits angegeben wurde
phil294
6

Syntax für ngIf / Else

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

Geben Sie hier die Bildbeschreibung ein

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>

Geben Sie hier die Bildbeschreibung ein

Observables mit NgIf und Async Pipe

Für mehr Details

Geben Sie hier die Bildbeschreibung ein

Lyes CHIOUKH
quelle
6

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>
  1. 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>
  1. 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>
Hoang Tran Sohn
quelle
Großartig! Wir sind vor kurzem zu Winkel 8
Islam Murtazaev
5

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

hoogw
quelle
5

ng-template

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


<ng-template #template2> 
        ...
</ng-template>
Aniket
quelle
3

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

Geben Sie hier die Bildbeschreibung ein

Rzv Razvan
quelle
1
<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>
Amir Touitou
quelle
1

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-
Kalpesh Panchal
quelle
1

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

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

oder

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

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.

user1707141
quelle