Korzystam z Angulara i chcę użyć *ngIf else(dostępny od wersji 4) w tym przykładzie:

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

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

Jak mogę osiągnąć to samo zachowanie ngIf else?

Kąt 4 i 5 :

za pomocą else:

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

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

możesz także użyć 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>

lub thensam:

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

Próbny :

Plunker

Detale:

<ng-template>: jest własną implementacją <template>tagu Angulara, która jest zgodna z MDN :

Element HTML <template>jest mechanizmem służącym do przechowywania treści po stronie klienta, które nie są renderowane po załadowaniu strony, ale mogą być następnie tworzone podczas tworzenia za pomocą JavaScript.

W Angular 4.xx Możesz użyć ngIf na cztery sposoby, aby uzyskać prostą procedurę, jeśli inaczej:

1. Po prostu użyj If

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

2. Używanie If with Else (uwaga na templateName )

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

3. Używanie If z Then (uwaga na templateName )

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

4. Używanie If z Then i 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>
   

Wskazówka: ngIf ocenia wyrażenie , a następnie renderuje następnie lub innego szablonu w jego miejsce, gdy wyrażenie jest truthy lub falsy odpowiednio. Zazwyczaj:

• wtedy szablon jest wbudowanym szablonem ngIf, chyba że jest powiązany z inną wartością.
• w przeciwnym razie szablon jest pusty, chyba że jest związany.

Aby pracować z obserwowalnym, to zwykle robię, aby wyświetlić, jeśli obserwowalna tablica składa się z danych.

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

„bindEmail” sprawdzi, czy e-mail jest dostępny, czy nie. jeśli istnieje adres e-mail, wyświetli się Wyloguj, w przeciwnym razie wyświetli się Logowanie

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

Możesz użyć <ng-container>i <ng-template>dla osiągnięcia tego

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

Poniżej znajduje się demo Stackblitz Live

demo na żywo

Mam nadzieję, że to pomoże ... !!!

Dla Angular 9/8

Link źródłowy z przykładami

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

Składnia dla ngIf / Else

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

Używanie NgIf / Else / Then jawnej składni

Aby dodać szablon, musimy po prostu powiązać go z szablonem.

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

Obserwowalne za pomocą NgIf i Async Pipe

Po więcej szczegółów

Po prostu dodaj nowe aktualizacje z Angular 8.

1. W przypadku, gdy z innym, możemy użyć ngIf i ngIfElse .

<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. W przypadku, gdy tak, możemy użyć ngIf i ngIfThen .

<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. W przypadku, gdy z tym i innym, możemy użyć ngIf , ngIfThen i ngIfElse .

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

W Angular 4.0 if..elseskładnia jest dość podobna do operatorów warunkowych w Javie.

W Javie używasz do "condition?stmnt1:stmnt2".

W Angular 4.0 używasz *ngIf="condition;then stmnt1 else stmnt2".

Wynikowa wartość wyrażenia ngif nie będzie tylko logiczną wartością prawda lub fałsz

jeśli wyrażenie jest tylko przedmiotem, nadal ocenia je jako prawdę.

jeśli obiekt jest niezdefiniowany lub nie istnieje, to ngif oceni to jako fałsz.

powszechnym zastosowaniem jest, jeśli obiekt został załadowany, istnieje, a następnie wyświetla zawartość tego obiektu, w przeciwnym razie wyświetla „ładowanie .......”.

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

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

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

inny przykład:

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

inny przykład:

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

szablon ngif

ngif kątowy 4

ng-template

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


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

Istnieją dwie możliwości użycia warunku w znaczniku HTML lub szablonach:

1. * ngIf dyrektywa CommonModule, w znaczniku HTML;
2. Jeśli inaczej

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

W kątach 4, 5 i 6

Możemy po prostu utworzyć zmienną odniesienia szablonu ^[2] i połączyć ją z warunkiem else w dyrektywie * ngIf

Możliwe składnie ^[1] to:

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

Źródła:

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

Możesz także użyć trójskładnikowego operatora warunkowego Javascript? pod kątem:

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

lub

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

Wiem, że minęło trochę czasu, ale chcę to dodać, jeśli to pomoże. Sposób, w jaki poszedłem, to posiadanie dwóch flag w komponencie i dwóch ngIf dla odpowiednich dwóch flag.

To było proste i działało dobrze z materiałem, ponieważ szablon ng i materiał nie działały dobrze razem.