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 中的静态字符串时，应使用引号。比较组件字符串变量时无需使用引号。