631

Angular kullanıyorum ve *ngIf elsebu örnekte (sürüm 4'ten beri mevcut) kullanmak istiyorum :

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

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

Aynı davranışı nasıl elde edebilirim ngIf else?

angular if-statement angular-template

— Kawli Norman
kaynak

1

Örnek NgIf, NgIf Else ve NgIf ile açıklanan Angular 8 için buraya bakın. Sonra Else freakyjolly.com/…

— Code Spy

981

Açısal 4 ve 5 :

kullanarak else:

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

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

ayrıca şunları kullanabilirsiniz 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>

veya thenyalnız:

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

Demo:

Plunker

Detaylar:

<ng-template>: Angular'ın MDN'ye<template> göre etiketini kendi uygulamasıdır :

HTML <template>öğesi, bir sayfa yüklendiğinde oluşturulamayacak ancak daha sonra JavaScript kullanılarak çalışma zamanı sırasında başlatılabilecek istemci tarafı içeriğini tutmak için bir mekanizmadır.

— Bougarfaoui El houcine
kaynak

8

Div gibi başka bir etiket olmadan sadece <ng-template> kullanmanın bir yolu olduğunu umuyordum, ama garip bir şekilde değil ... <div> 'i kullandıkça kaldırıldığını biliyorum, ama sanırım uygulama olarak garip.

— andreas

20

@andreas <ng-container>if-cümlesi için kullanabilirsiniz

— Martin Schneider

2

Not: Kullanabileceğiniz ng-containerşablonun * ngIf içeren kap için değil

— Simon_Weaver

@Simon_Weaver Zor yoldan anladım. Ama neden? neden *ngIf üzerinde çalışmaya izin vermediler ng-template?

— Eran Medan

<div * ngIf = "isValid; sonra other_content içeriği"> burada yoksayılır </div> yoksayılmaz. it is place fot

— injjecting

185

Eğik 4.xx ise kullanabilirsiniz ngIf başka prosedür ise basit ulaşmak için dört şekilde:

Sadece Kullanımı Eğer

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

If'yi Else ile kullanma (Lütfen templateName'e dikkat edin )

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

<ng-template #templateName>
    If isValid is false
</ng-template>

If ile Then'ı kullanma (Lütfen templateName'e dikkat edin )

<div *ngIf="isValid; then templateName">
    Here is never showing
</div>

<ng-template #templateName>
    If isValid is true
</ng-template>

If ve Then ile birlikte kullanma

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

İpucu: ngIf değerlendirir ifadesini ve ardından vermektedir sonra veya başka ifade falsy sırasıyla truthy olduğunda veya onun yerine şablonunu. Genellikle:

o zaman şablon, farklı bir değere bağlı olmadıkça ngIf'in satır içi şablonudur .

aksi belirtilmedikçe şablon boştur.

— John Henckel
kaynak

Derleyici kabul etmiyor gibi görünüyor ...; else .... Muhtemelen ;kaldırılmalıdır.

— slartidan

5

Açısal-6'da test ettim ...; else ...ve işe yaradı

— WasiF

20

Gözlenebilir ile çalışmak için, genellikle gözlemlenebilir dizi veri içeriyorsa görüntülemek için yaptığım budur.

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

— Ah Hiang
kaynak

8

"bindEmail" e-postanın kullanılabilir olup olmadığını kontrol edecektir. e-posta varsa Oturumu Kapat’dan başka bir şey gösterilirse Giriş yap gösterilir

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

— Prashant Shrivastava
kaynak

2

Bu işe yaramıyor. Doğru olsaydı, yine de değer katmayacaktır çünkü kabul edilen cevap zaten nasıl yapılacağını gösterir.

— Günter Zöchbauer

8

Sen kullanabilirsiniz yapmak <ng-container>ve <ng-template>bu Başarmak için

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

Stackblitz Live demosunu aşağıda bulabilirsiniz

canlı demo

Umarım bu yardımcı olur ... !!!

— Aralık
kaynak

8

İçin açısal 9/8

Örneklerle Kaynak Bağlantısı

    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) * ve Diğer

    <ng-container *ngIf="isDone; else elseNotDone">
      It's Done!
    </ng-container>

    <ng-template #elseNotDone>
      It's Not Done!
    </ng-template>

3) * ngIf, Sonra ve Diğer

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

— Kod Casusu
kaynak

Bu sadece kabul edilen cevabın daha önce belirttiğini tekrarlar

— phil294

6

NgIf / Else için sözdizimi

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

NgIf / Else / Sonra açık sözdizimini kullanma

O zaman şablon eklemek için, onu bir şablona açıkça bağlamak zorundayız.

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

NgIf ve Async Pipe ile gözlemlenebilirler

Daha fazla ayrıntı için

— LYES - CHIOUKH
kaynak

6

Açısal 8'den yeni güncellemeler eklemeniz yeterlidir.

Başka bir durumda, ngIf ve ngIfElse kullanabilirsiniz .

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

Bu durumda, ngIf ve ngIfThen kullanabiliriz .

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

Bu durumda ve başka durumlarda, ngIf , ngIfThen ve ngIfElse kullanabiliriz .

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

— Hoang tran oğlu
kaynak

Harika! Geçenlerde açısal 8'e taşındık

— Islam Murtazaev

5

Angular 4.0'da if..elsesözdizimi Java'daki koşullu işleçlere oldukça benzer.

Java için kullanın "condition?stmnt1:stmnt2".

Açısal 4.0'da kullanırsınız *ngIf="condition;then stmnt1 else stmnt2".

— Amit Gaikwad
kaynak

1

İfade ederken Oracle davasına benziyor .. :-)

— Peter

4

Çoğu C tabanlı dilde bulunan üçlü operatöre atıfta bulunuyorsunuz, ancak bu, Kotlin'in if ifadelerine daha yakın .

— mythz

5

ngif ifadesi sonuç değeri sadece boolean true veya false olmakla kalmaz

eğer ifade sadece bir nesne ise, onu hala doğruluk olarak değerlendirir.

nesne tanımsızsa veya yoksa, ngif nesneyi yanlış olarak değerlendirir.

ortak kullanım, bir nesne yüklüyse, varsa, bu nesnenin içeriğini görüntüler, aksi takdirde "yükleniyor ......." görüntüler.

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

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

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

başka bir örnek:

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

anka kuşu örneği:

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

ngif şablonu

ngif açısal 4

— hoogw
kaynak

5

ng-template

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


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

— aniket
kaynak

3

HTML etiketi veya şablonlarında koşul olması durumunda iki seçenek vardır:

HTML ng üzerinde CommonModule'den * ngIf yönergesi;
if-else

— Rzv Razvan
kaynak

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>

— Amir Touitou
kaynak

1

Açısal 4, 5 ve 6'da

Bir şablon referans değişkeni ^{[2] oluşturabilir} ve bunu bir * ngIf yönergesi içindeki başka koşulla ilişkilendirebiliriz

Olası Sözdizimleri ^[1] :

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

Kaynaklar:

— Kalpesh Panchal
kaynak

1

Javascript kısa üçlü koşullu işleci de kullanabilirsiniz? böyle açısal olarak:

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

veya

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

— Sebastian Viereck
kaynak

0

Bunun bir süredir olduğunu biliyorum, ancak yardımcı olursa eklemek istiyorum. Etrafımdaki yol, bileşende iki bayrak ve karşılık gelen iki bayrak için iki ngIf kullanmaktır.

Basitti ve ng-template ile materyalle iyi çalıştı ve materyal birlikte iyi çalışmadı.

— user1707141
kaynak

* NgEğer nasıl kullanılır?

NgIf / Else için sözdizimi

NgIf / Else / Sonra açık sözdizimini kullanma

NgIf ve Async Pipe ile gözlemlenebilirler

Açısal 4, 5 ve 6'da