Angular2 Service获取json数据
在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数据的更多相关文章
- HttpURLConnection从网上获取Json数据并解析详解
HttpURLConnection从网上获取Json数据并解析 1.HttpURLConnection请求数据的步骤 (1)构造一个URL接口地址: URL url = new URL("h ...
- ajax获取json数据及实现跨域请求
最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...
- Netflix Falcor获取JSON数据
Netflix开源了JavaScript库Falcor,它为从多个来源获取JSON数据提供了模型和异步机制. Netflix利用Falcor库实现通过JSON数据填充他们网页应用的用户界面.所有来自内 ...
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- jquery用ajax方式从后台获取json数据,将内容填充到下拉列表。
从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...
- jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...
随机推荐
- Javascript专题(三)c.各种轮播--上下滚动轮播(面向对象版本)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 1、python简单介绍
写在前面:曾经与java擦肩而过,现在懊悔很深,希望自己通过学习python,熟练掌握python,来弥补曾经的愚蠢.python简单介绍 python 1989年年底诞生,截止2017年,已经是IT ...
- Django 03 模板路径、模板变量、常用的过滤器
Django 03 模板路径.模板变量.常用的过滤器 一.模板路径 #1.在每个app下面添加一个templates文件 #2.在项目views.py里面第33行INSTALLED_APPS里面添加上 ...
- A*算法的认识与求第K短路模板
现在来了解A*算法是什么 现在来解决A*求K短路问题 在一个有权图中,从起点到终点最短的路径成为最短路,第2短的路成为次短路,第3短的路成为第3短路,依此类推,第k短的路成为第k短路.那么,第k短路怎 ...
- Unity UGUI暂停按钮切换图片代码
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...
- 打印流-PrintStream
打印流-PrintStream java.io.PrintStream为其他输出流添加了功能,使其他的流能够更方便的打印各种数据值表现形式 PrintStream特点: 1.只负责数据的输入,不负责数 ...
- CentOS7.4搭建GitLab
1.查看服务器环境 uname -a 2.下载安装包 [1]找到相应的最新版本的下载路径 网址:https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/e ...
- RPC框架设计思路
RPC是指远程过程调用 1.要解决通讯的问题,主要是通过在客户端和服务器之间建立TCP连接,远程过程调用的所有交换的数据都在这个连接里传输.连接可以是按需连接,调用结束后就断掉,也可以是长连接,多个远 ...
- Java实例学习——企业进销存管理系统(1)
Java实例学习——企业进销存管理系统(1) (本实例为书上实例,我所记录的是我的学习过程) 开始时间:2月12日 完成时间:暂未完成 2月12日—选择企业进销存管理系统 选择企业进销存管理系统这一实 ...
- laydate 显示结束时间不小于开始时间
jsp: <div class="form-group"> <label >交易时间:</label> <input ...