本文转自: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 *ngIfstatement 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的更多相关文章

  1. angular 中*ngIf 和*ngSwitch判断语句

    <div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> <p ...

  2. [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 ...

  3. angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了

    一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...

  4. Angular 显示英雄列表

    在本页面,你将扩展<英雄指南>应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息. 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示. 最终,你会从远端的数 ...

  5. angular官网实例(综合)

    第一部分: (应用的“外壳”) 1.新建项目: ng new mytest 2.进入项目目录,并启动这个应用. cd mytest ng serve --open 3.添加一个标题 打开 app.co ...

  6. AngularJS进阶(三十八)上拉加载问题解决方法

    AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...

  7. Angular6 学习笔记——指令

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  8. Ionic Js十六:滚动条

    ion-scroll ion-scroll 用于创建一个可滚动的容器. <ion-scroll [delegate-handle=""] [direction="& ...

  9. ionic基础知识

    ion-header-bar(头部 页眉) 在内容顶部添加一个固定header栏. 用法 <ion-header-bar align-title="left" class=& ...

随机推荐

  1. Git的SSH-key生成、导入及使用

    Git主要使用4种协议传输数据:本地协议,SSH协议,Git协议和HTTP/S协议. SSH协议是最为常用的一种,正式介绍SSH之前,简要说明一下其它协议. 本地协议(file://) 本地协议的优点 ...

  2. BeanUtil拷贝

    拷贝vo对象 一些查询到的数据很多是不需要的,可以创建vo对象,对需要的对象属性进行拷贝 maven依赖 <dependency> <groupId>org.projectlo ...

  3. C++与C语言在结构体上的区别

    用Nios 实现逻辑上很清楚,只是C++用switch语句后,写的很麻烦,主要是Switch语句很长吧. 另外要记录下:struct在C++中,在a文件中定义在b文件中定义变量是可以的,但在C语言中, ...

  4. 利用python同步windows和linux文件

    写python脚本的初衷,每次在windows编辑完文件后,想同步到linux上去,只能够登录服务器,然后再利用网络copy,重复性很大,就想着能不能写一个小脚本帮我同步 逻辑:比对本地和服务器文件的 ...

  5. [Solution] JZOJ3470 最短路

    [Solution] JZOJ3470 最短路 题面 Description 给定一个n个点m条边的有向图,有k个标记点,要求从规定的起点按任意顺序经过所有标记点到达规定的终点,问最短的距离是多少. ...

  6. bash编程-Shell变量

    bash中,所有变量的值默认均为字符串. 1. 变量操作 调用变量 $变量 查看变量(所有类型) set 删除变量 unset 变量 2. 变量分类 2.1 自定义变量 自定义变量仅对当前Shell有 ...

  7. 9.7 翻译系列:EF数据注解特性之--InverseProperty【EF 6 Code-First系列】

    原文链接:https://www.entityframeworktutorial.net/code-first/inverseproperty-dataannotations-attribute-in ...

  8. Delphi - TDateTimePicker使用注意问题

    TDateTimePicker使用时候,如果想获取到修改后的值,必须注Kind和time属性必须对应! 1,时间设置: treatmentTime1DTPicker.Kind := dtkTime; ...

  9. asp.net对接拼多多

    asp.net对接拼多多视频地址:https://www.bilibili.com/video/av43512047/?p=7

  10. SpringDataSolr 过滤(或者叫筛选)查询

    // 被本类调用 private Map searchList(Map searchMap) { // 1.1关键字查询 SimpleHighlightQuery highlightQuery = n ...