631

私はAngularを使用*ngIf elseしていて、この例で（バージョン4以降で使用可能）使用したいと思います。

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

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

どうすれば同じ動作を実現できngIf elseますか？

angular if-statement angular-template

— カウリノーマン
ソース

1

例NgIf、NgIf elseとNgIfその後エルスと説明し、ここで角度8のためのチェックfreakyjolly.com/...

— コードスパイ

981

Angular 4および5：

を使用してelse：

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

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

あなたも使うことができます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>

またはthen一人で：

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

デモ：

プランカー

詳細：

<ng-template>：MDNに<template>準拠したタグのAngular独自の実装です。

HTML <template>要素は、ページが読み込まれたときにレンダリングされないが、実行時にJavaScriptを使用してインスタンス化されるクライアント側コンテンツを保持するためのメカニズムです。

— ブーガルファウイエルフシネ
ソース

8

<ng-template>をdivのような別のタグなしで使用する方法があったらいいのにと思っていましたが、奇妙なことにそうではありません... <div>は使用すると削除されることを知っていますが、実装としては奇妙だと思います。

— andreas 2017年

20

@andreas <ng-container>if句に使用できます

— マーティンシュナイダー

2

注：ng-container* ngIfを含むコンテナには使用できますが、テンプレートには使用できません

— Simon_Weaver

@Simon_Weaver私は難しい方法を考え出した。しかし、なぜ？なぜ彼らは*ngIf 仕事をすることを許可しなかったのng-templateですか？

— エランメダン2018年

<div * ngIf = "isValid; then else else other_content">ここは無視されます</ div>無視されません。ng-templateを注入するための場所

— dimson d '25

185

Angular 4.xx では、ngIfを4つの方法で使用して、単純なif else手順を実現できます。

ただ、使用する場合

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

ElseでのIfの使用（templateNameに注意してください）

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

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

ThenでのIfの使用（templateNameに注意してください）

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

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

ThenおよびElseでのIfの使用

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

ヒント：ngIfは式を評価し、式が真または偽の場合、thenまたはelseテンプレートをそれぞれその場所にレンダリングします。通常は次のとおりです。

その後、テンプレートはインラインテンプレートですngIf異なる値にバインドされていない限り。

他に、それがバインドされていない限り、テンプレートが空白になっています。

— ジョン・ヘンケル
ソース

コンパイラが受け付けないよう...; else ...です。おそらく;削除する必要があります。

— slartidan 2018

5

angular-6では、私はテストし...; else ...てそれが機能しました

— WasiF

20

オブザーバブルを操作するために、これは通常、オブザーバブル配列がデータで構成されている場合に表示するために行います。

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

— アー・ヒアン
ソース

8

「bindEmail」はメールが利用可能かどうかをチェックします。メールが存在する場合はログアウトが表示され、それ以外の場合はログインが表示されます

<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
ソース

2

これは機能しません。それが正しければ、受け入れられた回答がすでにその方法を示しているため、それでも値は追加されません。

— ギュンターZöchbauer

8

あなたはこれを使用<ng-container>し<ng-template>て達成することができます

<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デモを見つけることができます

ライブデモ

これが役に立てば幸い... !!!

— DeC
ソース

8

以下のための角度9/8

例のあるソースリンク

    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およびElse

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

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

3）* ngIf、Then、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

これは、受け入れられた回答がすでに述べていることだけを繰り返す

— phil294

6

ngIf / Elseの構文

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

NgIf / Else / Thenの明示的な構文の使用

テンプレートを追加するには、テンプレートに明示的にバインドする必要があります。

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

NgIfと非同期パイプを使用した監視可能オブジェクト

詳細については

— イエス-チューク
ソース

6

Angular 8から新しいアップデートを追加するだけです。

else ifの場合は、ngIfと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>

その場合の場合は、ngIfと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>

thenおよびelseのcase ifの場合、ngIf、ngIfThen、および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>

— ホアントランソン
ソース

すごい！私たちは最近、角度8に移動しました

— イスラムムルタザエフ

5

Angular 4.0では、if..else構文はJavaの条件演算子に非常に似ています。

Javaではに使用し"condition?stmnt1:stmnt2"ます。

Angular 4.0ではを使用します*ngIf="condition;then stmnt1 else stmnt2"。

— アミット・ガイクワッド
ソース

1

式の場合、Oracleのケースのように見えます。.:-)

— Peter

4

ほとんどのCベースの言語に存在する3項演算子を参照していますが、これはKotlinのif式に近いものです。

— mythz 2017年

5

ngif式の結果の値は、ブール値のtrueまたはfalseだけではありません

式が単なるオブジェクトの場合でも、それは真実であると評価します。

オブジェクトが未定義または存在しない場合、ngifはそれを偽りと評価します。

一般的な使用法は、オブジェクトがロードされて存在する場合は、このオブジェクトのコンテンツを表示し、それ以外の場合は「loading .......」を表示します。

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

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

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

もう一つの例：

  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の例：

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

ngifテンプレート

ngif角度4

— Hoogw
ソース

5

ng-template

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


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

— アニケット
ソース

3

HTMLタグまたはテンプレートのif条件を使用するには、2つの方法があります。

CommonModuleの* ngIfディレクティブ、HTMLタグ。
if-else

— Rzv Razvan
ソース

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

Angular 4、5、6

テンプレート参照変数 ^[2]を作成し、それを* ngIfディレクティブ内のelse条件にリンクするだけです。

可能な構文 ^[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>

デモ： https : //stackblitz.com/edit/angular-feumnt? embed =1& file=src/app/ app.component.html

出典：

— カルペシュパンチャル
ソース

1

JavaScriptの短い3項条件演算子を使用することもできますか？このような角度で：

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

または

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

— セバスチャン・フィーレック
ソース

0

これはしばらく前からわかっていますが、役に立った場合は追加したいと思います。私が行った方法は、コンポーネントに2つのフラグを設定し、対応する2つのフラグに2つのngIfを設定することです。

ng-templateとマテリアルがうまく機能しないため、シンプルでマテリアルとうまく機能しました。

— user1707141
ソース

* ngIfの使用方法は？

ngIf / Elseの構文

NgIf / Else / Thenの明示的な構文の使用

NgIfと非同期パイプを使用した監視可能オブジェクト

Angular 4、5、6