[转]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=& ...
随机推荐
- Git的SSH-key生成、导入及使用
Git主要使用4种协议传输数据:本地协议,SSH协议,Git协议和HTTP/S协议. SSH协议是最为常用的一种,正式介绍SSH之前,简要说明一下其它协议. 本地协议(file://) 本地协议的优点 ...
- BeanUtil拷贝
拷贝vo对象 一些查询到的数据很多是不需要的,可以创建vo对象,对需要的对象属性进行拷贝 maven依赖 <dependency> <groupId>org.projectlo ...
- C++与C语言在结构体上的区别
用Nios 实现逻辑上很清楚,只是C++用switch语句后,写的很麻烦,主要是Switch语句很长吧. 另外要记录下:struct在C++中,在a文件中定义在b文件中定义变量是可以的,但在C语言中, ...
- 利用python同步windows和linux文件
写python脚本的初衷,每次在windows编辑完文件后,想同步到linux上去,只能够登录服务器,然后再利用网络copy,重复性很大,就想着能不能写一个小脚本帮我同步 逻辑:比对本地和服务器文件的 ...
- [Solution] JZOJ3470 最短路
[Solution] JZOJ3470 最短路 题面 Description 给定一个n个点m条边的有向图,有k个标记点,要求从规定的起点按任意顺序经过所有标记点到达规定的终点,问最短的距离是多少. ...
- bash编程-Shell变量
bash中,所有变量的值默认均为字符串. 1. 变量操作 调用变量 $变量 查看变量(所有类型) set 删除变量 unset 变量 2. 变量分类 2.1 自定义变量 自定义变量仅对当前Shell有 ...
- 9.7 翻译系列:EF数据注解特性之--InverseProperty【EF 6 Code-First系列】
原文链接:https://www.entityframeworktutorial.net/code-first/inverseproperty-dataannotations-attribute-in ...
- Delphi - TDateTimePicker使用注意问题
TDateTimePicker使用时候,如果想获取到修改后的值,必须注Kind和time属性必须对应! 1,时间设置: treatmentTime1DTPicker.Kind := dtkTime; ...
- asp.net对接拼多多
asp.net对接拼多多视频地址:https://www.bilibili.com/video/av43512047/?p=7
- SpringDataSolr 过滤(或者叫筛选)查询
// 被本类调用 private Map searchList(Map searchMap) { // 1.1关键字查询 SimpleHighlightQuery highlightQuery = n ...