[Angular] New async 'as' syntax and ngIf.. else
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的更多相关文章
- [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 ...
- [Angular 2] Template property syntax
This lesson covers using the [input] syntax to change an element property such as “hidden” or “conte ...
- [Angular 2] Async Http
Async Pipe: The Asynce pipe receive a Promise or Observable as input and subscribes to the input, e ...
- 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 ...
- [转]Angular 4 *ngIf/Else
本文转自:http://tylerscode.com/2017/03/angular-4-ngifelse/ As you may know it wasn’t that many months ag ...
- Angular 4+ 修仙之路
Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...
- Angular 5.x 学习笔记(1) - 模板语法
Angular 5.x Template Syntax Learn Note Angular 5.x 模板语法学习笔记 标签(空格分隔): Angular Note on github.com 上手 ...
- angular学习笔记(二十九)-$q服务
angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...
- Angular概念纵览
Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend ...
随机推荐
- (诡异Floyd&自环)MZ Training 2014 #15 E题(POJ 2240)
你们见过这么诡异的FLOYD吗? 先上题. [Description] 货币的汇率存在差异.比如,如果1美元购买0.5英镑,1英镑买10法郎.而1法国法郎买0.21美元.然后,通过转换货币,一个聪明的 ...
- 转:IOS的推送。是一个强大的功能
IOS下我们很多人天天开着 邮件推送 微信推送 QQ推送 微博推送 新浪微博推送,安卓敢吗? 五个后台进程消耗电.流量谁敢这么做?现在安卓也出了推送,但绝对是伪推送.实际是挂了个进程,关掉了就收不到. ...
- easyui datagird 总计栏
在使用easyui 的表格的时.非常多时候须要加一个总计栏,当然easyui中有加总计栏的方法,写一个footer就好,然而我认为这样的方法并不好.由于加入的总计栏是和列表每一个单元格相应的,有长度限 ...
- JS排序的运用
排序是一个非常实用的功能,队列也是一样实用. 有时候项目中就是会用到它. 举个例子,队列的运用,比如刷小礼物,接收方,会受到很多用户的礼物.为了公平起见,要一个个的显示出礼物效果.这个时候就需要队列了 ...
- 使用h5 <a>标签 href='url' download 下载踩过的坑
用户点击下载多媒体文件(图片/视频等),最简单的方式: <a href='url' download="filename.ext">下载</a> 如果url ...
- dfs算法中求数列的组合
/* 从13个书中挑选5个值,他们的组合可能是 什么, 如下代码 dfs深度遍历, 和全排列是一种方法,但是思路不同 */ public class Main { static int count = ...
- Inversion of Control Containers and the Dependency Injection pattern--Martin Fowler
原文地址:https://martinfowler.com/articles/injection.html n the Java community there's been a rush of li ...
- shell 日期转换
1.字符串转换为时间戳可以这样做: date -d "2010-10-18 00:00:00" +%s 输出形如: 1287331200 其中,-d参数表示显示指定的字符串所表示的 ...
- 一台服务器安装运行多个Tomcat及注册服务
项目需要,自己配置了一下,顺便分享出来. 1.下载对应版本Tomcat,这里下载Tomcat7.0.65.zip; 下载地址:http://archive.apache.org/dist/tomcat ...
- 【CS Round #39 (Div. 2 only) D】Seven-segment Display
[Link]:https://csacademy.com/contest/round-39/task/seven-segment-display/ [Description] 0..9各自有一个数字, ...