web-dev-qa-db-ja.com

他の* ngIfの使い方は？

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

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

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

ngIf elseと同じ振る舞いをするにはどうすればいいですか？

angularif-statementangular-template
470
kawli norman

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>：はAngularが独自に実装した<template>タグです。これは _ mdn _ に従います。 

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

728
Bougarfaoui El houcine

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

  1. 使用するだけIf

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

  2. Elseを使用する場合（templateNameに注意してください）

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

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

  3. If Thenを使用（templateNameに注意してください）

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

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

  4. IfとThenおよび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>

ヒント：ngIfはexpressionを評価してから、thenまたはelseテンプレートは、式がそれぞれ真実または偽である場合にその場所にあります。通常：

  • thenテンプレートは、異なる値にバインドされていない限り、ngIfのインラインテンプレートです。 。
  • elseテンプレートは、バインドされていない限り空白です。
149
user2577907

観測量を扱うために、これは観測可能配列がデータで構成されている場合に表示するために通常行うことです。

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

"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>
6
Prashant Shrivastava

Angular 4.0では、if..else構文は、Javaの条件演算子とよく似ています。

Javaでは"condition?stmnt1:stmnt2"を使います。

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

4
Amit Gaikwad

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

4
hoogw

NgIf/Elseの構文

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

enter image description here

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>

enter image description here

NgIfと非同期パイプによる観測量

詳細については

enter image description here

2
Lyes CHIOUKH

ForAngular 8

ソース リンクwith Examples

    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>
2
Code Spy

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. https://angular.io/api/common/NgIf#syntax
  2. https://angular.io/guide/template-syntax#template-reference-variables--var-
1
Kalpesh Panchal

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

  1. CommonModuleからのngIfディレクティブ、HTMLタグ。 
  2. if-else

enter image description here

1
Rzv Razvan

ng-template

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


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

また、Javascriptの短い3項条件演算子を使用できますか。このように角度で：

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

または

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

私はこれがしばらく経ったことを知っています、しかしそれが助けになるならそれを加えたいです。私が行ったやり方は、コンポーネント内に2つのフラグを、対応する2つのフラグ用に2つのngIfsを持つことです。 

Ng-templateとmaterialはうまく連携していなかったので、それは単純で、materialとうまく連携しました。 

0
user1707141
<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>
0
Amir Twito