From Anuglar v4 above, we are able to using 'as' with async pipe. This allow as using 'new variable' instead of subscribe to observable.

We also able to use 'else' with '*ngIf', else taks a 'template' which will be displayed when the if expression is not matched.

      <ng-template #loading>
<div class="message">
<img src="/img/loading.svg" alt="loading...">
Fetching meals...
</div>
</ng-template> <div *ngIf="meals$ | async as meals; else loading;">
<div class="message" *ngIf="!meals.length">
<img src="/img/face.svg" alt="no meals">
No meals, add new meal to add
</div>
<!-- meal ngFor -->
</div>

[Angular] New async 'as' syntax and ngIf.. else的更多相关文章

  1. [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword

    Angular allows us to conveniently use the async pipe to automatically register to RxJS observables a ...

  2. [Angular 2] Template property syntax

    This lesson covers using the [input] syntax to change an element property such as “hidden” or “conte ...

  3. [Angular 2] Async Http

    Async Pipe: The Asynce pipe receive a Promise or Observable as  input and subscribes to the input, e ...

  4. Coroutines declared with async/await syntax is the preferred way of writing asyncio applications. For example, the following snippet of code (requires Python 3.7+) prints “hello”, waits 1 second, and

    小结: 1.异步io  协程 Coroutines and Tasks — Python 3.7.3 documentation https://docs.python.org/3/library/a ...

  5. [转]Angular 4 *ngIf/Else

    本文转自:http://tylerscode.com/2017/03/angular-4-ngifelse/ As you may know it wasn’t that many months ag ...

  6. Angular 4+ 修仙之路

    Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...

  7. Angular 5.x 学习笔记(1) - 模板语法

    Angular 5.x Template Syntax Learn Note Angular 5.x 模板语法学习笔记 标签(空格分隔): Angular Note on github.com 上手 ...

  8. angular学习笔记(二十九)-$q服务

    angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...

  9. Angular概念纵览

    Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend ...

随机推荐

  1. 20160227.CCPP体系具体解释(0037天)

    程序片段(01):01.一对一模式.c+02.中介者模式.c+03.广播模式.c 内容概要:事件 ///01.一对一模式.c #include <stdio.h> #include < ...

  2. jquery19 ajax()

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. Linux / Windows应用方案不完全对照表

    Linux/Windows应用方案不完全对照表 650) this.width=650;" border="0" src="http://img1.51cto. ...

  4. HDU 2633 Getting Driving License(模拟)

    Getting Driving License Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/ ...

  5. JS原生方法被覆盖后的恢复办法

    alert 被覆盖 今天装修博客园,调试了下JS代码发现 alert() 方法被官方覆盖了,查看源码得知 alert 的功能被替换成了 console.log. 恢复 var _frame = doc ...

  6. pycharm不显示工具栏,自动导入模块,格式化代码快捷键

    我们需修改View里面的Toolbar,在前面打上沟,然后就可以显示了 自动导入模块设置:import numpy as np 我们需用鼠标选中numpy,然后在键盘上同时按住Alt+Enter键,通 ...

  7. Hive通过查询语句向表中插入数据过程中发现的坑

    前言 近期在学习使用Hive(版本号0.13.1)的过程中,发现了一些坑,它们也许是Hive提倡的比关系数据库更加自由的体现(同一时候引来一些问题).也许是一些bug.总而言之,这些都须要使用Hive ...

  8. 兔子--ps中的基本工具总结(ps cs5)

    矩形选框工具 椭圆选框工具 单行选框工具 单列选框工具 移动工具 套索工具柜 多边形套索工具 磁性套索工具 魔棒工具 高速选择工具 裁剪工具 切片工具 切片选择工具 吸管工具 颜色取样器工具 标尺工具 ...

  9. js06--利用js给数组去重

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  10. POJ 1874 畅通工程续(最短路模板题)

    畅通工程续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...