在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



												

Angular2 Service获取json数据的更多相关文章

  1. HttpURLConnection从网上获取Json数据并解析详解

    HttpURLConnection从网上获取Json数据并解析 1.HttpURLConnection请求数据的步骤 (1)构造一个URL接口地址: URL url = new URL("h ...

  2. ajax获取json数据及实现跨域请求

    最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...

  3. Netflix Falcor获取JSON数据

    Netflix开源了JavaScript库Falcor,它为从多个来源获取JSON数据提供了模型和异步机制. Netflix利用Falcor库实现通过JSON数据填充他们网页应用的用户界面.所有来自内 ...

  4. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  5. jquery用ajax方式从后台获取json数据,将内容填充到下拉列表。

    从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...

  6. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  7. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  8. android客户端从服务器端获取json数据并解析的实现代码

    今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下   首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...

  9. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

随机推荐

  1. MQ 重复消费如何解决?

    1. 使用幂等操作 乐观锁:每个数据有一个版本号,和当前版本号相同的时候进行更新 去重表(缓存): 唯一性索引,如果已经存在值了就不行更新 2. 算法 两个链表是否相交? 3.redis  集合相交的 ...

  2. 消息中间件的研究 (四)RabbitMQ、Kafka、RocketMQ消息中间件的对比及分析

    RabbitMQ:     RabbitMQ是使用Erlang语言开发的开源消息队列系统,基于AMQP协议来实现.AMQP的主要特征是面向消息.队列.路由(包括点对点和发布/订阅).可靠性.安全.AM ...

  3. [题解](排列/逆序对)luogu_P1338末日的传说

    首先我们要考虑怎么排能使逆序对数最多:显然是下降序列时,会产生n*(n-1)/2数量的逆序对 那么我们肯定是要尽量把序列的尾端安排成下降序列,前面的尽量不动,中间可能有一段排列自适应到m的逆序对数 然 ...

  4. Javascript专题(三)b.各种轮播和细节分析--上下滚动轮播

    这一次,我们用原生JS实现上下滚动方式的轮播.顺带学习一下用JS来创建HTML元素. 上一次写的轮播是淡入淡出效果的,相对来说其实是比较简单的. github源码: 上下轮播源码-github A. ...

  5. Word中图片自动编号且与文中引用的编号对应

    当我们在进行大篇幅 word 文档的编写时, 为了节约修改文章中图片所花费的大量时间, 可以将图片自动编号,且让文中引用的顺序跟着图片顺序的变化而变化,具体操作如下: 1. 将鼠标定在欲加编号的下方, ...

  6. 转 基于MySQL MEB的备份恢复

    几种备份方式的介绍 mysqlbackup是一个热备份工具.也就是说它不像mysqldump那样给表上一个全局锁,由于mysqldump上了这个锁,所以就造成客户端只能对 数据库进行读操作不能写,这也 ...

  7. POI Java 导出数据到Excel

    <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifac ...

  8. Unity (反向动力学)IK动画

  9. ServiceStack.Redis 使用

    Redis官网提供了很多开源的C#客户端.例如,Nhiredis ,ServiceStack.Redis ,StackExchange.Redis等.其中ServiceStack.Redis应该算是比 ...

  10. 构建高性能JavaScript应用

    前端性能优化准则: 一.减少http请求.     措施:合并小图片,css控制背景图.合并CSS,合并JS 二.使用CDN(Content Deliver Network 内容分发网络)发布静态资源 ...