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. JavaScript表单项数据过滤代码

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  2. 机房收费系统——UML类图

    在对一个软件系统进行设计和建模的时候,一般是从构造系统的基本词汇開始,包含构造这些词汇的基本属性和行为. 系统分析师假设要对所设计的系统清晰认识.还有考虑这些基本词汇之间的关系.而假设把这些行为可视化 ...

  3. zoj 2317 Nice Patterns Strike Back(矩阵乘法)

    problemId=1317">http://acm.zju.edu.cn/onlinejudge/showProblem.do? problemId=1317 给出一个n*m的矩阵( ...

  4. 用Shell脚本过滤Hadoop中不能訪问的节点

    近期使用的一个集群hp1,由于维护集群的人不给力.节点总是过一段时间就掉一两个.今天发现重新启动hadoop时,HDFS已经进入保护模式了. 决定把slaves节点中的无法訪问的节点所有过滤掉.所以写 ...

  5. 【iOS开发-88】事件传递原理解释哪个控件处理事件以及响应者链条的介绍

    一.触摸事件传递原理 (1)大的方向是:从父控件传递给子控件. --父控件会先检查自己能否接受事件的处理 --然后再看看触摸在不在自己的范围内 --假设在的话,就遍历子控件.看看有没有合适的子控件能够 ...

  6. java.lang.IllegalArgumentException: The observer is null.终于解决方式

    java.lang.IllegalArgumentException: The observer is null.终于解决方式 在使用数据适配的时候的问题: java.lang.IllegalArgu ...

  7. php输出杨辉三角

    php输出杨辉三角 一.截图 二.代码 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. jq---方法总结

    1. 什么是jQuery 在使用jQuery之前,我们必须先了解什么是jQuery,它能够干什么(不然我们为啥要用它). jQuery是一个非常流行的快速.小巧.功能强大的开源JavaScript库. ...

  9. IOS应用在ios7(iPhone5/iPhone5s)上不能全屏显示

    前言 [IOS应用在iOS7系统或者iPhone5/iPhone5s上不能全屏显示,应用画面上下各有1条黑色,但是在其他系统或者型号的手机上却是正常显示 Paste_Image.png Paste_I ...

  10. wget---从指定的URL下载文件

    wget命令用来从指定的URL下载文件.wget非常稳定,它在带宽很窄的情况下和不稳定网络中有很强的适应性,如果是由于网络的原因下载失败,wget会不断的尝试,直到整个文件下载完毕.如果是服务器打断下 ...