Saya menggunakan Angular dan saya ingin menggunakan *ngIf else(tersedia sejak versi 4) dalam contoh ini:

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

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

Bagaimana saya bisa mencapai perilaku yang sama ngIf else?

Sudut 4 dan 5 :

menggunakan else:

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

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

Anda juga dapat menggunakan 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>

atau thensendiri:

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

Demo:

Plunker

Detail:

<ng-template>: adalah implementasi <template>tag dari Angular sendiri yang sesuai dengan MDN :

<template>Elemen HTML adalah mekanisme untuk menahan konten sisi klien yang tidak akan dirender ketika halaman dimuat tetapi selanjutnya dapat dipakai saat runtime menggunakan JavaScript.

Dalam Angular 4.xx Anda dapat menggunakan ngIf dalam empat cara untuk mencapai prosedur sederhana jika lain:

1. Hanya Gunakan Jika

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

2. Menggunakan If with Else (Harap perhatikan templatName )

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

3. Menggunakan If with Then (Harap perhatikan templatName )

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

4. Menggunakan If dengan Then dan 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>
   

Kiat: ngIf mengevaluasi ekspresi dan kemudian menjadikan templat itu atau yang lain sebagai gantinya ketika ekspresi masing-masing benar atau salah. Biasanya:

• maka templat adalah templat inline dari ngIf kecuali terikat ke nilai yang berbeda.
• laintemplate kosong kecuali terikat.

Untuk bekerja dengan diamati, ini adalah apa yang biasanya saya lakukan untuk menampilkan jika array yang dapat diamati terdiri dari data.

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

"bindEmail" itu akan memeriksa apakah email tersedia atau tidak. jika email ada daripada Logout akan muncul kalau tidak Login akan muncul

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

Anda dapat Menggunakan <ng-container>dan <ng-template>untuk Mencapai Ini

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

Anda dapat menemukan demo Stackblitz Live di bawah ini

demo langsung

Semoga ini bisa membantu ... !!!

Untuk Angular 9/8

Tautan Sumber dengan Contoh

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

Sintaks untuk ngIf / Else

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

Menggunakan NgIf / Else / Then sintaks eksplisit

Untuk menambahkan template maka kita hanya perlu mengikatnya ke template secara eksplisit.

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

Dapat diobservasi dengan NgIf dan Async Pipe

Untuk lebih jelasnya

Cukup tambahkan pembaruan baru dari Angular 8.

1. Untuk kasus jika dengan yang lain, kita bisa menggunakan ngIf dan 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. Untuk kasus jika dengan itu, kita bisa menggunakan ngIf dan ngIfLalu .

<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. Untuk kasus jika dengan itu dan yang lain, kita dapat menggunakan ngIf , ngIfKemudian , dan 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>

Dalam if..elsesintaks 4.0 Angular sangat mirip dengan operator kondisional di Jawa.

Di Jawa Anda gunakan untuk "condition?stmnt1:stmnt2".

Di Angular 4.0 Anda gunakan *ngIf="condition;then stmnt1 else stmnt2".

ngif ekspresi yang menghasilkan nilai tidak hanya boolean benar atau salah

jika ungkapan itu hanya obyek, ia masih menilainya sebagai kebenaran.

jika objek tidak terdefinisi, atau tidak ada, maka ngif akan mengevaluasinya sebagai kepalsuan.

penggunaan umum adalah jika suatu objek dimuat, ada, lalu tampilkan konten objek ini, jika tidak tampilkan "memuat .......".

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

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

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

contoh lain:

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

contoh anthoer:

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

template ngif

ngif angular 4

ng-template

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


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

Ada dua kemungkinan untuk digunakan jika syarat pada tag atau templat HTML:

1. * Jika direktif dari CommonModule, pada tag HTML;
2. jika ada

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

Dalam Angular 4, 5 dan 6

Kita cukup membuat variabel referensi templat ^[2] dan menautkannya ke kondisi lain di dalam direktif * ngIf

Kemungkinan Sintaks ^[1] adalah:

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

Sumber:

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

Anda juga dapat menggunakan operator kondisional terner pendek Javascript? dalam sudut seperti ini:

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

atau

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

Saya tahu ini sudah lama, tetapi ingin menambahkannya jika itu membantu. Cara saya pergi adalah dengan memiliki dua flag di komponen dan dua ngIfs untuk dua flag yang sesuai.

Itu sederhana dan bekerja dengan baik dengan materi karena ng-template dan materi tidak bekerja dengan baik bersama.