[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 ...
随机推荐
- [Python] Find available methods and help in REPL
For example you want to know what methods are available in Python for String, you can do : dir(" ...
- EularProject 48: 利用数组求和
Problem 48 The series, 11+22+33+...+1010=10405071317. Find the last ten digits of the series, 11+22+ ...
- sdut 2805(最小生成树)
大家快来A水题 Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 (1<= N <=2000)(1<= M <= N*(N-1)/2 ...
- 网上看到的一些IT资源
A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板. Bootswatch:免费的Bootstrap主题. Templated:收集了845个免费的C ...
- java判断编码格式
package com.sssjd.storm; import java.io.UnsupportedEncodingException; /** * Created by jorda on 2017 ...
- cksum---检验文件CRC是否正确
- mount---挂载文件系统
挂载概念 Linux中的根目录以外的文件要想被访问,需要将其“关联”到根目录下的某个目录来实现,这种关联操作就是“挂载”,这个目录就是“挂载点”,解除次关联关系的过程称之为“卸载”. 注意:“挂载点” ...
- Python实现简单的HTTP服务器(支持文件下载)
python内置模块 SimpleHTTPServer (支持下载功能) 在对应的工作目录下,运行命令python -m SimpleHTTPServer 即可把当前目录下以共享服务的形式共享出去. ...
- 新版mysql修改root密码
- Android中的MVP架构初探
说来羞愧,MVP的架构模式已经在Android领域出现一两年了.可是到今天自己才開始Android领域中的MVP架构征程. 闲话不多说,開始吧. 一.架构演变概述 我记得我找第一份工作时,面试官问我& ...