在Angular2框架下一般交互解析json是要用到Service的,其实除了Service还是很多的,今天先写个最简单的前后端数据交互

嗯~~

首先我先在app包下直接创建Service

好了

这里呢Angular2有封装好的Http接口直接引用(对了,这里Http好像被废除了,,哈哈我也不知道换成啥了,先用吧)

import {Http} from "@angular/http";

如果引用map时报错,import用下这个就好了

import 'rxjs/add/operator/map';

下边呢通过getData()这个方法将json地址return道http这个属性中

'/all'是我后台的json地址你可以用自己的要是暂时没有 这个地址可以试试http://jsonplaceholder.typicode.com/posts


好了在component类中呢,

首先获取这条服务
providers : [ServiceService]

因为前边用到
Observable<any>;
这里类型所以这边也要用这个类型接收
this.data= this.ss.getData();
用这个Data接收道来自service的值。

对了还没完记得要在module中import

import {HttpModule} from "@angular/http";
imports: [
BrowserModule,
HttpModule
],
每次都忘,,每次都报错


Html中呢

<tr *ngFor="let item of data|async">
<td>
{{item.title}}
</td> <td> </td>
</tr>
这边我随便写的
记得在获取data中后添加|async

好了大概就这样了,第一次写哈哈,自己老是忘就当做笔记吧

______________________________________更新_____________________________________>

Http 改成HttpClient

模板那块改成HttpClientModule



												

最新文章

  1. Git删除tag
  2. webpack处理非模块化的几方法
  3. AJAX编程-封装ajax工具函数
  4. html a标签链接使用action 参数传递中文乱码
  5. Xtrabackup之innobackupex备份恢复详解(转)
  6. MSP下载方式
  7. Java 8 VM GC Tuning Guide Charter2
  8. oracle——表修改语句集合
  9. 日志收集框架 Exceptionless
  10. python_装饰器_语法糖
  11. OpenStack控制节点上搭建Q版nova服务(step5)
  12. rbac权限+中间件
  13. PHP no input file specified 三种解决方法
  14. 【CF865D】Buy Low Sell High(贪心)
  15. ARMCC和GCC编译ARM代码的软浮点和硬浮点问题 【转】
  16. centos6.5 开机自动挂载硬盘
  17. 内部排序-&gt;其它-&gt;地址排序(地址重排算法)
  18. Disruptor入门
  19. ionic开发之Android的focus起作用,而iOS不起作用
  20. soapui-groovy脚本中文乱码及符号乱码、响应乱码解决方案

热门文章

  1. linux命令ln
  2. rest get post 请求工具_restclient.jar
  3. jquery——选项卡
  4. 031 Next Permutation 下一个排列
  5. Android中常用的几种加密
  6. Zipkin — 微服务链路跟踪.
  7. java 中的阻塞队列
  8. Spring相关理解
  9. fn先生开篇博客
  10. Web框架的应用