Angular 中带有多个条件的 Ng-If

Muhammad Adil 2023年1月30日
  1. AngularJS 中 ng-if 的工作原理
  2. AngularJS 中的 <ng-template>
  3. 使用 ngIf 的多个条件
  4. 使用 *ngIf 比较字符串是否相等
Angular 中带有多个条件的 Ng-If

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-ifng-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 条件 (||)

如果只有一个条件为真,你可以使用 *ngIfOR (||) 运算符的帮助下显示元素。以下代码片段演示了在 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 中的静态字符串时,应使用引号。比较组件字符串变量时无需使用引号。

作者: Muhammad Adil
Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook