Angular指令ngIf用法详解

HTML是没有条件控制的语言,如果要根据某变量的值显示或隐藏某个DOM元素,往往需要结合JavaScript的if-else表达式来控制。

Angular ngIf就可以增强Html这方面的能力。ngIf接受一个表达式作为值,并且强制把表达式计算出的值转换为Boolean类型,如果值为true,则在DOM中渲染模板,如果值为false则不渲染ngIf所在的模板。

示例:

<div class="container" *ngIf="userLoggedIn">
    <h2>欢迎登录</2>
    <p>使用说明。。。。。</p>
</div>

示例中如果用户登录了,则显示出欢迎语。是否登录有userLoggedIn的值确定,userLoggeIn的值为true,则表示登录,false表示未登录。

应用ngIf的位置

应用ngIf的位置分为两种:

  • 模板存在容器父元素,即一个父元素,包含了所有是否要显示或隐藏的其他元素,这种情况ngIf放置在父元素上。
  • 模板没有容器元素,可以使用<ng-container>把其他元素包含在内,然后ngIf应用在<ng-container>上。

上面示例div就是一个容器元素。所以ng应用在它上面就可以了。

但模板没有容器元素,把ngIf应用在<ng-container>上,这样就可以控制显示或隐藏<ng-container>里的元素。而不需要额外添加其他类似div的父元素。

<ng-container *ngIf="userLoggedIn">
    <h2>欢迎登录</2>
    <p>使用说明。。。。。</p>
</ng-container>

ngIf 接受表达式的类型

ngIf不仅仅接受布尔表达式,还可以接受任意有效的TypeScript表达式,只要表达式能够转化为Boolean值就可以。它会根据表达式转换的Boolean值来决定是否渲染模板元素。

ngIf可以接受表达式的类型:布尔表达式,字符串,数组,对象以及数字等等。这个和JavaScript里if检测表达式是否为真是相同的。。

数字和字符串示例:

<div class="container" *ngIf="10">
   10表示为True,结果显示
</div>

<div class="container" *ngIf="0">
   0表示为False,结果隐藏
</div>

<div class="container" *ngIf="'hello world'">
   非空字符串为True,结果显示
</div>

<div class="container" *ngIf="''">
   空字符串为False,结果隐藏
</div>

数组和对象示例:

<div class="container" *ngIf="{hello: 'world'}">
     非null或undefined对象为True,结果显示
</div>

<div class="container" *ngIf="{}">
     空对象为True,结果显示
</div>

<div class="container" *ngIf="[1, 2 ,3]">
     数组对象为True,结果显示
</div>

<div class="container" *ngIf="[]">
     空数组为True,结果显示
</div>

数组和对象是否为true,是依据它的值是否为null或者undefined。

ngIf else语法

除了使用ngIf用于控制显示/隐藏外,有些情况需要使用else语句来控制显示的内容。

语法如下:

<div *ngIf="condition; else elseBlockId">
    condition条件为True,显示此内容
</div>
<ng-template #elseBlockId>
    condition条件为False,则显示此由elseBlock标记的模板内容。
</ng-template>

ngIf用于判断的表达式condition使用分号(;)与else关键词隔开,else后为标记模板id,示例为elseBlockId。<ng-template>使用elseBlockId标记,定义了条件为false,else要显示的内容。

ngIf then else语法

除了直接在ngIf容器元素内定义条件为true显示的内容外,可以使用then关键词,定义条件为true时显示的内容。是ngIf else的变种写法:

<div *ngIf="condition; then thenBlock else elseBlock"></div> 
<ng-template #thenBlock>
     condition条件为True,显示thenBlock内容
</ng-template> 
<ng-template #elseBlock>
      condition条件为False,显示elseBlock内容
</ng-template>

在ngIf表达式种使用Observable数据

如果是基于RxJs写的应用吗,在模板种使用的数据通常是使用Observable提供。

ngIf 指令可以结合async pipe来使用 Observable,如以下示例:

<ng-container *ngIf="(user$ | async) as user">    
   <span>用户名:</span>
   <span class="profile">{{user.name}}</span>
</ng-container>

示例中user$是一个Observable数据。不同于原始数据,Observable数据需要通过async管道来订阅,当Observable有数据发出,就会触发async的订阅。as user是把Observable发出的数据赋值给模板的本地变量user。

在模板中使用Observable有以下好处:

  • 当组件被销毁时,async管道会自动取消订阅 Observable。
  • 如果使用 OnPush 更改检测策略,组件视图将使用最新的 Observable 数据自动更新。

ngIf指令的语法糖

ngIf实际是ngIf指令的语法糖。其中前缀星号*,表示ngIf指令是一种结构性指令。

Angular在编译时,会把*表示的结构性执行编译为初始的形式,如*ngIf示例:

<div class="container" *ngIf="condition; else elseBlock">
       ... Angular会解糖(de-sugar)*ngIf语法
</div>

<ng-template #elseBlock>
     condition为false,显示此内容
</ng-template>

解糖为<ng-template>为:

<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
    <div class="container">
       ... Angular会解糖(de-sugar)*ngIf语法
     </div>
</ng-template>

<ng-template #elseBlock>
  condition为false,显示此内容
</ng-template>

版权声明:著作权归作者所有。

相关推荐

iOS获取Wifi列表详解

iOS 申请获取 Wifi 列表权限    iOS 上获取 Wifi 列表其实也有很大限制,在 iOS 9 以前是不能获取Wifi列表的,只能获取当前连接的 Wifi 信息,也就表示只有连接了 Wifi 才能定位,刚才文章说到的场景是,我在一个陌生的原理,拿出手机扫描 Wifi ,也就是我并没连接那里的 Wifi(我不知道密码我怎么连啊)。Apple 在 iOS 9 以后,提

Angular 5 RouterLinkActive的用法

如果链接为当前路由(此时链接为激活状态),RouterLinkActive指令可以让我们给链接元素添加css的class样式。父路由连接激活默认情况下,当路由为链接的父路由或者完全匹配链接,链接都会认为是激活的状态。<a routerLink="/a/b" routerLinkActive="active">B链接</a>所以,示例里当路由为“/a”和“/a/b”class

Arch Linux使用BlueZ连接蓝牙设备指令

下面是在Arch Linux上使用Blue Z 5.31连接蓝牙的指令。依赖安装需要安装一下软件:bluez: bluetoothdbluez-utils: bluetoothctl, rfcomm配对1、启动守护进程:systemctl start bluetooth 2、使用bluetoothctl配对power on agent&n

Angular 5:HttpClient的基本用法

Angular 4.3引入了新的用于http请求的接口HttpClient。它旨在替换之前版本的接口Http。有以下新特性:对响应的body做类型检查默认返回的是JSON对象,不再需要使用json()显式解析返回的数据支持拦截器支持进度事件请求后验证和基于刷新的测试框架安装HttpClientModuleHttpClient属于@angular/common/http包的模块HttpCl

TypeScript:基本类型详解

布尔值(Boolean)TypeScript的布尔值和JavaScript一样有两个值:true和false。类型标识:boolean示例:let isDone: boolean = false; 数字(Number)和JavaScript一样,TypeScript的所有数字都是用浮点数表示,支持二进制,八进制,十进制以及十六进制的表示方式,类型标识:num