複数の条件を持つ Angular の Ng-If

1. AngularJS での ng-if の動作
2. AngularJS の <ng-template>
3. 複数の条件で ngIf を使用する
4. *ngIf を使用して文字列を比較して同等性を確認する

ngIf ディレクティブは、HTML コンテンツを動的に表示および非表示にできる AngularJS（https://angular.io/features）の強力なツールです。また、式に基づいてコンテンツを表示または非表示にすることもできます。ng-if ディレクティブのステートメントが TRUE ブール値と評価された場合、要素は HTML ビューに挿入されます。それ以外の場合は、DOM から完全に削除されます。この記事では、複数の条件を持つ AngularJS ng-if について説明します。

構文：

<element ng-if="expression"**>
</element>**

AngularJS での ng-if の動作

AngularJS フレームワークによって提供されるすべての組み込みディレクティブは、AngularJS フレームワークでは常に ng プレフィックスで指定されることを理解することが重要です。ng-if ディレクティブのステートメントは、True や False などのブール値に評価され、要素はこの値に従って HTML DOM に表示されます。

ng-if 式の評価が False 値を返すと、その要素は DOM から削除されます。もう 1つ覚えておくべきことは、HTML 要素が ngIf で削除されると、そのスコープが破棄され、要素がビューに戻されると、新しいスコープが確立されるということです。

ここでは、深く掘り下げる前に、ng-if と ng-show の Angular ディレクティブの違いを理解する必要があります。

ng-if ディレクティブの式の評価が FALSE の場合、要素は DOM から削除されます。ただし、ng-show ディレクティブの式の評価が FALSE の場合、要素は削除されるのではなく DOM で非表示になります。これは、display hidden の CSS 属性を使用して行われます。

例

PHP のバックグラウンドがある場合は、以下に示すように、if-else ブロックを HTML テンプレートに直接書き込むことができます。

if(display){
  <div>I am here</div>
}

else{
  <div>
   I am not here
  </div>
 }

ただし、HTML ファイルにはマークアップ要素のみを含める必要があるため、HTML で角かっこを使用して if-else ブロックを書き込むことはできません。理想的な解決策は、else 条件ブロックを何かに置き換えることです。

AngularJS の <ng-template>

基本的なディレクティブ ngIf の前に、アスタリスク（*）を検討したことがありますか？ngIf ディレクティブで HTML 要素を使用する場合、angular はその要素を指定された条件で <ng-template> タグにラップします。ng-template の詳細については、ここをクリックしてください。

<ng-template [ngIf]="display">

  <div>I am Playing</div>

</ng-template> 

Angular フレームワークでは、<ng-template> は最終的な HTML 出力に含まれない疑似要素です。<ng-template> 内の要素のみが挿入されます。要素に ID やクラスなどの特性がある場合は、それらを使用します。これらの要素は、<ng-template> 内の <div> 要素に追加されます。

<div *ngIf="display" class="information" id="info">
  I am Playing
</div> 
 
 <ng-template [ngIf]="display">
    <div class="information" id="info">
      I am Playing
    </div>
 </ng-template>

複数の条件で ngIf を使用する

AngularJS ng-if の次の条件について説明しましょう。

1つ目は AND 条件、2つ目は OR 条件、3つ目は NOT 条件です。

*ngIf の AND 条件（&&）

*ngIf ステートメントの信憑性を判断するために、論理演算子 AND（&&）を使用して多数の条件を使用できます。すべての条件が満たされると、要素が DOM に追加されます。次の例は、AngularJS が AND 条件を評価する方法を示しています。

<div *ngIf="isCar && isBike">

 <span>{{Name}}</span>

</div>

*ngIf の OR 条件（||）

条件の 1つだけが当てはまる場合は、*ngIf を使用して、OR（||）演算子を使用して要素を表示できます。次のコードスニペットは、*ngIf での OR 条件の使用法を示しています。

 <div *ngIf="isCar || isBike">
   // Show Price comparison chart
 </div>

*ngIf の NOT 条件（!）

*ngIf 条件を逆にするために、以下に示すように NOT 演算子（!）を使用できます。

<div *ngIf="!isCar">
	//Show the Prices of Bikes
</div>

*ngIf を使用して文字列を比較して同等性を確認する

*ngIf ステートメント内で、二重等号 == または三重等号 === 演算子を適用して、文字列が等しいかどうかを比較できます。

文字列の等式を比較する場合、置き忘れたり、二重等号または三重等号の使用を忘れたりして、代わりに代入演算子（単一の）を使用するのは簡単です。

*ngIf 内で代入演算子を使用すると、以下に示すように、Parser Error: Bindings cannot contain assignments at column というエラーが発生します。

<div *ngIf="Items.type = 'Cosmetics'">
// Show the Cosmetics items
</div>

*ngIf 内の静的文字列を比較する場合は、引用符を使用する必要があります。コンポーネント文字列変数を比較するときに引用符を使用する必要はありません。