wake-up-neo.com

Wie verwende ich * ngIf?

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 mit ngIf else dasselbe Verhalten erreichen?

angularif-statementangular-template
417
kawli norman

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 then else verwenden:

<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 then alleine:

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

Demo:

Plunker

Einzelheiten:

<ng-template>: ist die eigene Implementierung des <template>-Tags von Angular. Dies entspricht MDN : 

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

728
Bougarfaoui El houcine

In Angular 4.x.x Sie können 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 mit 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 mit 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 das dann oder else Schablone an seiner Stelle, wenn der Ausdruck wahr oder falsch ist . Normalerweise die:

  • then template ist das Inline-Template von ngIf, sofern es nicht an einen anderen Wert gebunden ist.
  • Die Vorlage else ist leer, sofern sie nicht gebunden ist.
126
user2577907

Um mit Observable zu arbeiten, mache ich das normalerweise, wenn das Observable Array aus Daten besteht.

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

"bindEmail" überprüft, ob E-Mails verfügbar sind oder nicht. Wenn eine E-Mail vorhanden ist, wird Logout angezeigt, ansonsten 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>
6
Prashant Shrivastava

In Angular 4.0 ist if..else die 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".

4
Amit Gaikwad

der Ergebniswert eines ngif-Ausdrucks ist nicht einfach das boolesche true oder false

wenn der Ausdruck nur ein Objekt ist, wird er immer noch als Wahrhaftigkeit bewertet.

wenn das Objekt nicht definiert ist oder nicht existiert, wird es von ngif als falsch bewertet.

die übliche Verwendung ist, wenn ein Objekt geladen ist, vorhanden ist und der Inhalt dieses Objekts angezeigt wird. Andernfalls wird "loading ......." 

 <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 ​​

4
hoogw

Syntax für ngIf/Else

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

 enter image description here

Verwendung von NgIf/Else/Then explizite Syntax

Um dann die 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>

 enter image description here

Observables mit NgIf und Async Pipe

Für mehr Details

 enter image description here

2
Lyes CHIOUKH

Für Winkel 8

Quelle Link mit 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 and 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>
2
Code Spy

In Winkel 4, 5 und 6

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

Die möglichen Syntaxes [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-
1
Kalpesh Panchal

Wenn die Bedingung für HTML-Tags oder Vorlagen verwendet wird, gibt es zwei Möglichkeiten:

  1. * ngIf Direktive von CommonModule für HTML-Tag; 
  2. ansonsten

 enter image description here

1
Rzv Razvan

ng-template

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


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

Sie können auch Javascript verwenden, kurzer ternärer bedingter Operator? im eckigen so:

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

oder

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

Ich weiß, dass das schon eine Weile her ist, aber ich möchte es hinzufügen, wenn es hilft. Ich habe mit zwei Flags in der Komponente und zwei NgIfs für die entsprechenden zwei Flags gearbeitet. 

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

0
user1707141
<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>
0
Amir Twito