[转]Angular 4 *ngIf/Else
本文转自:http://tylerscode.com/2017/03/angular-4-ngifelse/
As you may know it wasn’t that many months ago that Angular 2 left RC and went Full Release(back in August). We are already upon the next big release of Angular with v4. Angular 4.0.0-rc.1 was released in late February with rc.2 hot on it’s heels 6 days later, today, March 2nd. There are lots of improvements including smaller bundle sizes and faster compilation. My favorite new feature at the moment is the new NgIf/Else syntax.
Previously, you may have used something like this:
1
2
3
4
5
6
7
|
< div * ngIf = "someCondition" > < h1 >Condition Passed!</ h1 > </ div > < div * ngIf = "!someCondition" > < h1 >Condition Failed!</ h1 > </ div > |
Now you can use syntax like this:
1
2
3
4
5
6
7
|
< div * ngIf = "someCondition; else falsyTemplate" > < h1 >Condition Passed!</ h1 > </ div > < ng-template #falsyTemplate> < h1 >Condition Failed!</ h1 > </ ng-template > |
You can specify another template using ng-template
, give it a variable using #
and then reference it in the *ngIf
statement with an else
clause.
You can also use a more explicit syntax with NgIf/Else/Then. It would look something like this:
1
2
3
4
5
6
7
8
9
|
< div * ngIf = "someCondition; then truthyTemplate else falsyTemplate" ></ div > < ng-template #truthyTemplate > < h1 >Condition Passed!</ h1 > </ ng-template > < ng-template #falsyTemplate> < h1 >Condition Failed!</ h1 > </ ng-template > |
In my opinion this helps code readability as it makes it more explicit and easier to follow. No more falsy checks with !someCondition
like code.
Also, the async
pipe was added to *ngIf
. Previously you may have had a form or page that contained several fields that all independently subscribed to observables using the async
pipe. It may have looked something like this:
1
2
3
|
< p >{{someObservableOne | async}}</ p > < p >{{someObservableTwo | async}}</ p > < p >{{someObservableThree | async}}</ p > |
Now you can wrap all those observables into a single observable and subscribe to it in the *ngIf
statement and assign a local object variable to reference in all your fields like this:
1
2
3
4
5
6
7
|
< div * ngIf = "someObservable | async; else loadingScreen; let myObject" > < p >{{myObject.propertyOne}}</ p > < p >{{myObject.propertyTwo}}</ p > < p >{{myObject.propertyThree}}</ p > </ div > < ng-template #loadingScreen>loading...</ ng-template > |
This code, in my opinion, is cleaner because it only subscribes to a single observable once to retrieve data. I hope this feature is as beneficial to others as it is to me.
[转]Angular 4 *ngIf/Else的更多相关文章
- angular 中*ngIf 和*ngSwitch判断语句
<div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> <p ...
- [Angular] Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe
The network may be unreliable and loading data may take time. Thus it is important to give the user ...
- angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了
一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...
- Angular 显示英雄列表
在本页面,你将扩展<英雄指南>应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息. 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示. 最终,你会从远端的数 ...
- angular官网实例(综合)
第一部分: (应用的“外壳”) 1.新建项目: ng new mytest 2.进入项目目录,并启动这个应用. cd mytest ng serve --open 3.添加一个标题 打开 app.co ...
- AngularJS进阶(三十八)上拉加载问题解决方法
AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...
- Angular6 学习笔记——指令
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- Ionic Js十六:滚动条
ion-scroll ion-scroll 用于创建一个可滚动的容器. <ion-scroll [delegate-handle=""] [direction="& ...
- ionic基础知识
ion-header-bar(头部 页眉) 在内容顶部添加一个固定header栏. 用法 <ion-header-bar align-title="left" class=& ...
随机推荐
- Cmd控制台修改编码方法
Cmd控制台修改编码方法 一.前言 在Unbuntu中用sqlite3-command-line操作sqlite3还好好的,到了windows下查询表内容时发现中文全部乱码了!马上想到sqlite3内 ...
- Java并发编程:volatile关键字
volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...
- ABP框架系列之五十:(Swagger-UI-集成)
Introduction From it's web site: "....with a Swagger-enabled API, you get interactive documenta ...
- Re:uxul
Re: Unbelieveable eXperience of University Life
- Linux下设置快捷键
以设置终端为例,进入Settings>>Keyboard>>Custom Shortcuts,点左下脚的+号,Name栏填入Treminal,command栏填入gnome-t ...
- 消息中间件——activeMQ
Activemq使用教程 解压activmq进入bin\win64 启动activemq.bat 启动成功 浏览器访问http://127.0.0.1:8161 创建maven工程 在pom.xml中 ...
- 【算法】二叉查找树(BST)实现字典API
参考资料 <算法(java)> — — Robert Sedgewick, Kevin Wayne <数据结构> ...
- web API简介(四):客户端储存之IndexedDB API
概述 前篇:web API简介(三):客户端储存之Web Storage API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. Index ...
- 5月份值得一看的 Java 技术干货!
5月又即将要离我们远去了,这个月有小长假51劳动节,有54青年节,有513母亲节,更有坑爹的520神马节?!! 废话不说,又到了总结上个月干货的时候了,这个月我们带来了各种Java技术干货,都是不得不 ...
- 【LeetCode】13. 罗马数字转整数
题目 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为 ...