Bagaimana cara menggunakan * ngIf lain?


631

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?


1
Periksa di sini untuk 8 Sudut dijelaskan dengan Contoh NgIf, NgIf Else dan NgIf Then Else freakyjolly.com/…
Code Spy

Jawaban:


982

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.


8
Saya berharap ada cara hanya menggunakan <ng-template> tanpa tag lain seperti div, tapi anehnya tidak ... Saya tahu <div> dihapus saat Anda menggunakannya, tapi agak aneh karena implementasi saya pikir.
andreas

20
@andreas Anda dapat menggunakan <ng-container>untuk if-clause
Martin Schneider

2
Catatan: Anda dapat menggunakan ng-containeruntuk wadah yang berisi * ngIf, tetapi tidak untuk templat
Simon_Weaver

@Simon_Weaver saya menemukan jawabannya dengan cara yang sulit. Tapi kenapa? mengapa mereka tidak mengizinkan*ngIf bekerja ng-template?
Eran Medan

<div * ngIf = "isValid; lalu konten lainnya other_content"> di sini diabaikan </div> tidak diabaikan. ini adalah tempat untuk menyuntikkan template
dimson d

185

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.

Sepertinya kompiler tidak menerima ...; else .... Mungkin ;harus dihapus.
slartidan

5
di angular-6, saya diuji dengan ...; else ...dan itu berhasil
WasiF

20

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>

8

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

2
Ini tidak berhasil. Jika itu benar, maka itu masih tidak akan menambah nilai karena jawaban yang diterima sudah menunjukkan bagaimana melakukannya.
Günter Zöchbauer

8

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


8

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>

1
Ini hanya mengulangi apa yang sudah diterima oleh jawaban yang telah diterima
phil294

6

Sintaks untuk ngIf / Else

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

masukkan deskripsi gambar di sini

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>

masukkan deskripsi gambar di sini

Dapat diobservasi dengan NgIf dan Async Pipe

Untuk lebih jelasnya

masukkan deskripsi gambar di sini


6

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

Bagus! Kami baru saja pindah ke sudut 8
Islam Murtazaev


5

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


5

ng-template

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


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

3

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

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

masukkan deskripsi gambar di sini


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>

1

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-

1

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

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

atau

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

0

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.