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. eclipse的项目栏

    点击window然后选择show view 然后选择project Explorer就会出现项目栏

  2. JAVA基础针对自己薄弱环节总结02(循环)

    循环 A:水仙花. classShuiXianHua { public static void main(String[] args) { for(int i=101;i<1000;i++) { ...

  3. vue --- watch 高级用法

    假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=&q ...

  4. Css盒模型有哪几部分,标准盒模型和IE盒模型有哪些区别

    首先介绍Css的盒模型也就是标准盒模型(BOX Model) 包含了 内容(content) 内边距(padding) 边框(border) 外边框(margin) 这是大家经常用到的,也是现在的标准 ...

  5. GDSOI2019划水记

    Day -9 北京集训结束,飞回广州浪两天后回校. Day -2 回家休整,打麻将技术进一步提高. Day 0 前往佛山入住酒店,论被人用大床房换双人房是什么体验??(一个人住真的舒服) 待在房间背模 ...

  6. 小米开源文件管理器MiCodeFileExplorer-源码研究(1)-2个模型Model

    上篇说到,把小米的Java代码整理成了5个包,其中1个是net.micode.fileexplorer.model.这个包就2个模型类,最基本了,FileInfo和FavoriteItem. pack ...

  7. 18/9/21模拟赛-Updated

    18/9/21模拟赛 期望得分:100:实际得分:0  qwq 拿到题目第一眼,我去,这不是洛谷原题(仓鼠找Sugar)吗 又多看了几眼,嗯,对,除了是有多组数据外,就是原题 然后码码码....自以为 ...

  8. 【Codeforces Round #457 (Div. 2) C】Jamie and Interesting Graph

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 找比n-1大的最小的素数x 1-2,2-3..(n-2)-(n-1)长度都为1 然后(n-1)-n长度为(x-(n-2)) 然后其他 ...

  9. 【Uva 1543】Telescope

    [Link]: [Description] 给你一个圆和圆周上的n(3≤n≤40)个不同点.请选择其中的m(3≤m≤n)个,按照在圆 周上的顺序连成一个m边形,使得它的面积最大. [Solution] ...

  10. aop 中joinpoint的使用方法

    一.簡述下joinpoint在不同情況下的不同: 1.在around中可以用,此時可以執行被包裹的代碼,可以根據情況來判斷是否執行被包裹的代碼,以實現控制的作用. public void around ...