[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 and render the result into the template once the request succeeds. This has some drawbacks, especially if we want to bind the same data in multiple parts of the template. In this lesson we will learn how we can leverage the async
pipe and the as
keyword introduced in Angular version 4.0.0 to circumvent such drawbacks.
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map'; @Component({
selector: 'person-detail',
template: `
<h1>Person Detail</h1> <div *ngIf="person$ | async as person">
Name: {{ person.name }} <br />
Twitter: {{ person.twitter }}
</div>
`
})
export class PersonDetailComponent implements OnInit {
person$; constructor(private http: Http) { } ngOnInit() {
this.person$ = this.http
.get('./person.json')
.map(res => res.json());
}
}
[Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword的更多相关文章
- Angular Multiple HTTP Requests with RxJS
原文:https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs ----------------------------- ...
- AngularJs angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- angular.bind() 函数
angular.bind bind 函数有三个参数, 参一:是一个对象 参二:是一个 function 参三:是用来给参二传参数的,可写可不写,看你心情 参数也可以在调用函数的时候传,也可以当做第三个 ...
- angular.bind
angular.bind :Returns a function which calls function fn bound to self (self becomes the this for fn ...
- Angular - - angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- AngularJS方法 —— angular.bind
描述: 上下文,函数以及参数动态绑定,返回值为绑定之后的函数. 其中args是可选的动态参数,self在fn中使用this调用. 使用方法: angular.bind(self,fn,args ); ...
- [Angular] Use Angular components in AngularJS applications with Angular Elements
When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...
- [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)
前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...
- [Angular 2 Router] Configure Your First Angular 2 Route
Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and ...
随机推荐
- deep-in-es6(七)
Symbols对象 JavaScript的第七种原始类型 以前的数据类型: Undefined 未定义 Null 空值 Boolean 布尔类型 Number 数字类型 String 字符串类型 Ob ...
- JavaScript--数据结构与算法之链表实现约瑟夫环
传说在公元1 世纪的犹太战争中,犹太历史学家弗拉维奥·约瑟夫斯和他的40 个同胞被罗马士兵包围.犹太士兵决定宁可自杀也不做俘虏,于是商量出了一个自杀方案.他们围成一个圈,从一个人开始,数到第三个人时将 ...
- VS Code 关于SFTP上传文件到多服务器的配置
工欲善其事,必先利其器! 刚学前端的时候一直用的DW来编写代码,其功能非常强大,但在Linux下不能用,所以就转VS Code了. 但是刚开始使用VS Code的时候,很多DW上的功能需要自己安装扩展 ...
- 03004_SQL语句
1.SQL语法 (1)数据库是不认识JAVA语言的,但是我们同样要与数据库交互,这时需要使用到数据库认识的语言SQL语句,它是数据库的代码: (2)结构化查询语言(Structured Query L ...
- virmon防火墙64位正式版(暂定)公布
ChangeLog: 2015-06-2564位版本号签名问题临时得到解决.还要致谢一下某位黑客. 支持版本号x64 Windows Vista.7.8.8.1以上等.个人仅仅在Windows7上做了 ...
- weblogic12
http://www.oracle.com/technetwork/middleware/weblogic/downloads/index.html 建立ejb http://docs.oracle. ...
- HTTP浅谈
HTTP浅谈 1···什么是HTTP? HTTP协议就是超文本传输协议(HyperText Transfer Protocol),通俗理解是浏览器和web服务器传输数据格式的协议,HTTP协议是一个应 ...
- Spring3拦截引发的问题——WEB开发中的client路径
什么是client路径? 第一类.也就是html或js文件等client訪问的文件里的路径,这里包含一些资源文件的引入(js.css还有各种图片等),或是跳转到静态html页面,总之获取的都是静态资源 ...
- 25.Spring @Transactional工作原理
转自:http://www.importnew.com/12300.html 本文将深入研究Spring的事务管理.主要介绍@Transactional在底层是如何工作的.之后的文章将介绍: prop ...
- Solr 核心组成
Solr 核心组成就是:SolrHome 和 SolrCore. SolrHome:SolrHome是Solr运行的主目录,该目录可以包含多个solrcore目录. SolrCore:每个solrc ...