[Angular 2] Async Http
2016-04-03 17:52
405 查看
Async Pipe:
The Asynce pipe receive a Promise or Observable as input and subscribes to the input, evetually emitting the value(s) changes arrive.
In the demo, the logic is fom the list component, we ask service to get Heros by calling Start War API, on the service side, we only return array of heros with observalbe type:
Here <Hero[]>, we use Typescript to convert the raw json data to Hero[]. The same as you new Hero().
For the list, we assign the return value from service to this.heros , so it is a list of Hero with Observable type, then we apply async pipe to the html.
The Asynce pipe receive a Promise or Observable as input and subscribes to the input, evetually emitting the value(s) changes arrive.
In the demo, the logic is fom the list component, we ask service to get Heros by calling Start War API, on the service side, we only return array of heros with observalbe type:
getHeros(){ return this._http.get('http://swapi.co/api/people') .map( (res: Response) => <Hero[]>res.json().results) .catch(this.handleError); } ... export class Hero{ constructor(public name: string){} }
Here <Hero[]>, we use Typescript to convert the raw json data to Hero[]. The same as you new Hero().
For the list, we assign the return value from service to this.heros , so it is a list of Hero with Observable type, then we apply async pipe to the html.
heros: Observable<Hero[]>; getHeros(){ this.heros = this.heroService.getHeros(); }
<ul> <li *ngFor="#hero of heros | async"> {{hero.name}} </li> </ul>
相关文章推荐
- HTTP状态码一览表
- iOS UILabel显示网络图片 NSMutableAttributedString使用网络图片
- FTP 、TFTP、HTTP
- CentOS 6.7 禁用 IPV6网络的方法
- volley Post网络请求
- 【Java网络编程】Socket的使用
- 【unp】unix网络编程卷1-->环境搭建(ubuntu14.04)
- 拥塞避免算法和慢启动算法的共同作用
- 计算机网络overview-2
- Android网络与数据存储_学习笔记_第六周:SQLite与ContentProvider
- Tilera多线程网络编程总结
- 以太网,IP,TCP,UDP数据包分析
- jboss tomcat 配置https请求方式
- 虚拟机三种网络连接方式
- Oracle的本地网络服务名配置
- 深度网络的设计与可视化工具
- 深度网络的框架结构
- android 网络技术基础学习 (七)
- TCP状态转换图
- 网络常用英语术语精选