[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 ...
随机推荐
- hdu1078 FatMouse and Cheese(记忆化搜索)
转载请注明出处:http://blog.csdn.net/u012860063 题目链接:pid=1078" target="_blank">http://acm. ...
- jquery13 attr() prop() val() addClass()等 : 对元素属性的操作
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- xml格式报文的拼装,和解析成实体类
我们的微信支付,使用的是第三方的支付,某银行的微信支持渠道.所有的接口请求.应答都是xml格式报文,这样就需要用到xml格式报文的拼装和解析,这儿简单讲一下. 拼接xml格式报文. 从页面表单提交和配 ...
- opencv标定程序(改动)
转载请注明来自:http://blog.csdn.net/zhouyelihua/article/details/38421377 资源下载见:点击打开链接 百度云盘免积分下载:https://pan ...
- UVALive 6527 Counting ones dfs(水
题目链接:点击打开链接 #include <cstdio> #include <vector> using namespace std; typedef long long l ...
- java初探秘之推断输入的一串字符是否全为小写字母
import java.io.IOException; import java.util.*; public class Two { public static void main(String[] ...
- Xcode 6 打包ipa文件
随着Xcode6.1的普遍应用.随之而来的非常多问题就会出现.这里来说一下怎样在Xcode6.1上生成Ad-hoc ipa.首先是要在你的开发人员账号上生成一个.ipa的主要应用就是在你公布到AppS ...
- Multiple CPUs,Multiple Cores、Hyper-Threading
CPU Basics: Multiple CPUs, Cores, and Hyper-Threading Explained 现在多数的家用电脑,仍然使用的是 Single CPU,Multiple ...
- CISP/CISA 每日一题 18
CISSP 每日一题(答)What is the purpose of an access review and audit? Checkto ensure that users do not hav ...
- 洛谷—— P1080 国王游戏
https://www.luogu.org/problem/show?pid=1080 题目描述 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整 ...