如何在AngularJS中使用* ngIf else？

简介： ngIf指令用于显示或隐藏角度应用程序的部分。可以将其添加到任何标签，它是常规的HTML标签，模板或选择器。这是一个结构指令，意味着它包括基于约束为布尔值的条件的模板。当表达式的值为真时，它将运行/显示“ then”子句中给出的模板。或者，当表达式的计算结果为false时，它将显示“ else”子句中给出的模板。如果else子句中没有任何内容，则默认情况下将显示为空白。

句法：

ngIf with an "else" block

    when condition is true.


    when condition is false.

它在内部创建两个 ，一个用于“ then”语句，另一个用于“ else” 。因此，当ngIf条件为true时，将显示未标记的的内容。如果为false，则运行带标签的 。

方法：

1. 众所周知，ngIf else语句可用于具有布尔类型的变量。创建一个有角度的应用程序，然后移至src / app 。首先，我们需要在app.component.ts中定义一个值为true或false的变量“ check”。

   
   import { Component } from '@angular/core';
     
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
     
   export class AppComponent {
     check:boolean = true;
   }
   

2. 定义变量后，移至app.component.html并使用引导程序类创建两个分区。移至有角度的应用程序，并编写命令npm install bootstrap 。第一个除法用于“真”条件，而内部的一个除法则用于假条件。我们已经宣布check为true，所以我们得到了一个绿色分割，表示条件为true。如果检查为假，则会显示红色框，说明条件为假。

   
   
       
   Condition true
       
     
     
       
   Condition false
       
     
   
   

输出：

输出：

好处：

• 编程语言的"if"块支持逻辑运算符，因此它支持"ngIf" 。它支持所有逻辑运算符，例如AND，OR，NOT等。
• ngIf有助于避免无法读取未定义的属性错误。假设有一个绑定的属性，称为“学生”。我们正在尝试访问具有“ Santosh”值的学生的“名称”子属性。如果学生为空，则将返回未定义的错误。因此，如果我们在访问子属性之前检查null，那么将使用* ngIf防止错误。

  
  
    {{student.name}}
  
    
  
  
    {{student.name}}
  
  

  输出：

  Santosh

• ngIf vs Hidden：您可能想知道为什么在HTML5中具有hidden属性时，为什么必须使用ngIf。是的，他们做的是相同的工作，但仍然有所不同。 hidden属性将所选元素从DOM中隐藏，但是该元素仍然存在于DOM中。而ngIf会删除DOM中的选定部分。它不干预CSS。

  
  
    Show this only if "check" is true
  
  

  输出：

  Show this only if "check" is true