Angular 中帶有多個條件的 Ng-If

1. AngularJS 中 ng-if 的工作原理
2. AngularJS 中的 <ng-template>
3. 使用 ngIf 的多個條件
4. 使用 *ngIf 比較字串是否相等

ngIf 指令是 AngularJS (https://angular.io/features) 中的強大工具，可讓你動態顯示和隱藏 HTML 內容。它還可以根據表示式顯示或隱藏內容。如果 ng-if 指令的語句計算結果為 TRUE 布林值，則將元素插入 HTML 檢視；否則，它會從 DOM 中完全刪除。本文將討論具有多個條件的 AngularJS ng-if。

語法：

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

AngularJS 中 ng-if 的工作原理

理解 AngularJS 框架提供的所有 In-Built 指令在 AngularJS 框架中總是以 ng 字首指定是至關重要的。ng-if 指令的語句評估為布林值，例如 True 或 False，並且元素根據該值顯示在 HTML DOM 上。

當 ng-if 表示式求值返回 False 值時，該元素將從 DOM 中刪除。要記住的另一件事是，當使用 ngIf 刪除 HTML 元素時，它的作用域會被破壞，當元素放回檢視時，會建立一個新的作用域。

在這裡，你需要了解 ng-if 和 ng-showAngular 指令之間的區別，然後才能深入瞭解。

當 ng-if 指令的表示式評估為 FALSE 時，該元素將從 DOM 中刪除；但是，當 ng-show 指令的表示式評估為 FALSE 時，該元素隱藏在 DOM 中而不是被刪除，這是使用 display hidden 的 CSS 屬性完成的。

例子

如果你有 PHP 背景，你可以直接在 HTML 模板中編寫 if-else 塊，如下所示。

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

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

但是，我們不能在 HTML 中使用括號來編寫 if-else 塊，因為 HTML 檔案中應該只包含標記元素。理想的解決方案是用某些東西替換 if 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 的以下條件。

第一個是 AND 條件，第二個是 OR 條件，第三個是 NOT 條件。

*ngIf 中的 and 條件(&&)

為了確定 *ngIf 語句的可信度，我們可以使用邏輯運算子 AND (&&) 的多個條件。如果滿足所有條件，該元素將被新增到 DOM。下面的例子演示了 AngularJS 如何評估一個 AND 條件：

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

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

</div>

*ngIf 中的 OR 條件 (||)

如果只有一個條件為真，你可以使用 *ngIf 在 OR (||) 運算子的幫助下顯示元素。以下程式碼片段演示了在 ngIf. 中使用 OR 條件。

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

*ngIf 中的 OR 條件(!)

要反轉*ngIf 條件，我們可以使用 NOT 運算子（!），如下所示。

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

使用 *ngIf 比較字串是否相等

在 *ngIf 語句中，我們可以應用 double equal(==) 或 triple equal(===) 運算子來比較字串是否相等。

在比較字串是否相等時，很容易放錯位置或忘記使用雙等或三等，而是使用賦值運算子（單等）。

當你在 *ngIf 中使用賦值運算子時，你將收到 Parser Error: Bindings cannot contain assignments at column 錯誤，如下所示。

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

在比較 *ngIf 中的靜態字串時，應使用引號。比較元件字串變數時無需使用引號。