[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 ...
随机推荐
- Android数据库高手秘籍(三)——使用LitePal升级表
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/39151617 在上一篇文章中,我们学习了LitePal的基本使用方法,体验了使用框 ...
- 关于Java的10个谎言
以下的这些都算是比較高级的问题了.面试中一般也非常少问到.由于它们可能会把面试者拒之门外.只是你能够自己找个时间来实践一下. System.exit(0)会跳过finally块的运行 System.s ...
- openfire 开发遇到的些问题
openfire的 jid 账户名 + '@" + 你的域名 可是当你的账户名中 有大拼音的 时候 就会变成小写 比如 Test , jid = tes ...
- 【HDU 4763】Theme Section(KMP)
这题数据水的一B.直接暴力都能够过. 比赛的时候暴力过的.回头依照正法做了一发. 匹配的时候 失配函数 事实上就是前缀 后缀的匹配长度,之后就是乱搞了. KMP的题可能不会非常直接的出,可是KMP的思 ...
- js---08函数 定时器
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- android 图片特效处理之图片叠加
这篇将讲到图片特效处理的图片叠加效果.跟前面一样是对像素点进行处理,可参照前面的android图像处理系列之七--图片涂鸦,水印-图片叠加和android图像处理系列之六--给图片添加边框(下)-图片 ...
- 体验 Windows 系统 CVM
添加角色功能: service.msc 设置自动服务,net start telnet
- bash的启动文件
文件名称 功能描写叙述 /etc/profile 登录时自己主动运行 ~/.bash_profile,~/.bash_login,~/.profile 登录时自己主动运行 ~/.bashrc shel ...
- java.lang.ClassNotFoundException: org.springframework.web.content.ContextLoaderListener
1.错误描写叙述 严重: Error configuring application listener of class org.springframework.web.content.Context ...
- php7 兼容 MySQL 相关函数
php7 兼容 MySQL 相关函数 PHP7 废除了 ”mysql.dll” ,推荐使用 mysqli 或者 pdo_mysql http://PHP.net/manual/zh/mysqlinfo ...