Wie benutzt man * ngIf sonst in Angular?

Im Winkel 4.x.x
Sie können ngIf in vier so erreichen Sie einfach, wenn andere Verfahren:

1. Verwenden Sie Einfach Wenn

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

2. Mit Wenn mit Anderen (Bitte beachten Sie, templateName)

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

3. Mit Wenn mit Dann (Bitte beachten Sie, templateName)

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

4. Mit Wenn 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 die Ausdruck und stellt dann die dann oder sonst
Vorlage in seiner Stelle beim Ausdruck ist truthy oder falsy beziehungsweise.
In der Regel:

• dann Vorlage ist die inline-Vorlage von ngIfes sei denn an einen anderen Wert.
• sonst - Vorlage ist leer, wenn es gebunden ist.

InformationsquelleAutor der Antwort

"bindEmail" es werden E-Mails zur Verfügung steht oder nicht. wenn E-Mail vorhanden sind, als Logout wird zeigen, sonst Anmeldung zeigen

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

InformationsquelleAutor der Antwort Prashant Shrivastava

ngif Ausdruck resultierende Wert nicht nur den booleschen Wert true oder false

wenn der Ausdruck ist nur ein Objekt, es noch bewerten es als truthiness.

wenn das Objekt nicht definiert ist, oder nicht existiert, dann ngif wertet es als Falschheit.

gemeinsamen Nutzung ist, wenn ein Objekt geladen wird, existieren, und zeigen Sie dann den Inhalt dieses Objekts, ansonsten Anzeige "laden.......".

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

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

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

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 Winkel 4

InformationsquelleAutor der Antwort hoogw

Im Winkel 4, 5 und 6

Wir können einfach erstellen Sie eine Vorlage Referenzvariable ^[2] und link, um die else-Bedingung innerhalb einer *ngIf Richtlinie

Mögliche Syntax ^[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-

InformationsquelleAutor der Antwort Kalpesh Panchal