[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 ...
随机推荐
- jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- js插件---markdown如何使用
js插件---markdown如何使用 一.总结 一句话总结:看文档,看api,看参数列表,看js调用插件的调用函数的参数(json) 1.js和css的问题:如何知道插件要引入哪些js和css? a ...
- Ajax的跨域问题分析
一.Ajax的跨域问题 Ajax是利用javascript内置XMLHttpRequest对象来进行传输的,所以它依赖于XMLHttpRequest对象,而XMLHttpRequest对象却有很多的限 ...
- 微信小程序---app.json中设置背景色不生效解决办法
按照官方文档的说明,backgroundColor应该可以设置窗口的背景色. "window":{ "backgroundTextStyle":"li ...
- C# Unable to load DLL 'WzCanDll.dll':找不到指定的模块
一.打开app无法加载DLL 我用C++编写的DLL,然后用C#写的界面APP,在自己的电脑上打开没有问题,放在其它电脑上就出现无法加载DLL库的问题,一连接APP就会出现问题,如下图所示: 二.解决 ...
- webclient类学习
(HttpWebRequest模拟请求登录):当一些硬件设备接口 或需要调用其他地方的接口时,模拟请求登录获取接口的数据就很有必要. webclient类:只想从特定的URI请求文件,则使用WebCl ...
- [Docker 官方文档] 理解 Docker
http://segmentfault.com/a/1190000002609286 什么是 Docker? Docker 是一个用于开发.交付和执行应用的开放平台,Docker 设计用来更快的交付你 ...
- oracle跨数据库跨用户訪问注意事项
java代码中不同意出现oracle的username.数据链路名. 跨用户.跨数据库的訪问必须在oracle中建同义词或视图来实现.在java代码中仅仅需当做当前用户下的对象处理.
- LeetCode 06 ZigZag Conversion
https://leetcode.com/problems/zigzag-conversion/ 水题纯考细心 题目:依照Z字形来把一个字符串写成矩阵,然后逐行输出矩阵. O(n)能够处理掉 记i为行 ...
- sql%rowcount 返回影响行数
oracle中.返回影响行数是:If sql%rowcount 举例: update ut_calenderStatus t set t.calenderstatus=pi_flg, t.m=pi_M ...