本文转自: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. Cmd控制台修改编码方法

    Cmd控制台修改编码方法 一.前言 在Unbuntu中用sqlite3-command-line操作sqlite3还好好的,到了windows下查询表内容时发现中文全部乱码了!马上想到sqlite3内 ...

  2. Java并发编程:volatile关键字

    volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...

  3. ABP框架系列之五十:(Swagger-UI-集成)

    Introduction From it's web site: "....with a Swagger-enabled API, you get interactive documenta ...

  4. Re:uxul

    Re: Unbelieveable eXperience of University Life

  5. Linux下设置快捷键

    以设置终端为例,进入Settings>>Keyboard>>Custom Shortcuts,点左下脚的+号,Name栏填入Treminal,command栏填入gnome-t ...

  6. 消息中间件——activeMQ

    Activemq使用教程 解压activmq进入bin\win64 启动activemq.bat 启动成功 浏览器访问http://127.0.0.1:8161 创建maven工程 在pom.xml中 ...

  7. 【算法】二叉查找树(BST)实现字典API

    参考资料 <算法(java)>                           — — Robert Sedgewick, Kevin Wayne <数据结构>       ...

  8. web API简介(四):客户端储存之IndexedDB API

    概述 前篇:web API简介(三):客户端储存之Web Storage API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. Index ...

  9. 5月份值得一看的 Java 技术干货!

    5月又即将要离我们远去了,这个月有小长假51劳动节,有54青年节,有513母亲节,更有坑爹的520神马节?!! 废话不说,又到了总结上个月干货的时候了,这个月我们带来了各种Java技术干货,都是不得不 ...

  10. 【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 ,即为 ...