数据请求 get

新建一个服务

 1. ng g service services /+服务名

 egng g service services/player

  • 在此服务中进行设置
  1. 引入自带组件以及注册   

    import {HttpClient,HttpHeaders} from '@angular/common/http'
  2. 在export class PlayerService中写入 
    httpOptions = {headers: new HttpHeaders({'content-Type':"application/json"})}
  3. 在constructor中进行声明
     constructor(private http:HttpClient) { }

  使用传来的url值以及其他的数据(后台给定的值)

  eg:

  1. 在服务中  
  • playerListUrl:string="http://192.168.1.87:8081/api/game/games";
  • getPlayerList():Observable<any>{
        return this.http.get(this.playerListUrl,this.httpOptions);
      }
  • 在对应组件的ts文件夹中
  • 在文件中引入服务
    import { PlayerService} from '../../player.service';  路径根据自己情况进行修改
     constructor(private playerService: PlayerService) {}
  • private games:Array<any> = []
  •  this.playerService.getPlayerList().subscribe(
          resp => {
            this.games = resp.data.games
          },
          error => {
            console.log(error)
          }
        )

注释:private games:Array<any> = []  声明一个变量用来接收数据,resp.data.games就是后台传来的数据

  

在页面中

angular get 数据请求的更多相关文章

  1. angualr post 数据请求

    数据请求 post 新建一个服务 1. ng g service services /+服务名  eg:ng g service services/player 在此服务中进行设置 引入自带组件以及注 ...

  2. Ajax --- 数据请求

    下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...

  3. 携带cookie进行数据请求

    前端进行数据请求有:普通的ajax(json)请求,jsop跨域请求,cors跨域请求,fetch请求...PC端这些请求方式中,普通的ajax(json)请求和jsop跨域请求是默认携带cookie ...

  4. XML 数据请求与JSON 数据请求

    (1)XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSerializer,另外结合第三方框架 XMLD ...

  5. 使用 AFNetworking 进行 XML 和 JSON 数据请求

    (1)XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSerializer,另外结合第三方框架 XMLD ...

  6. iOS - NetRequest 网络数据请求

    1.网络请求 1.1 网络通讯三要素 1.IP 地址(主机名): 网络中设备的唯一标示.不易记忆,可以用主机名(域名). 1) IP V4: 0~255.0~255.0~255.0~255 ,共有 2 ...

  7. iOS开发——网络Swift篇&NSURL进行数据请求(POST与GET)

    NSURL进行数据请求(POST与GET)   使用Swift进行iOS开发时,不可避免的要进行远程的数据获取和提交. 其数据请求的方式既可能是POST也可能是GET.同不管是POST还是GET又可以 ...

  8. angular的post请求,SpringMVC后台接收不到参数值的解决方案

    这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: @RequestMapping(method = RequestMethod.POST) @ResponseBod ...

  9. 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法

    这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: @RequestMapping(method = RequestMethod.POST) @ResponseBod ...

随机推荐

  1. loadrunner:Action.c(4): Error -27796: Failed to connect to server "10.8.251.101:10086": [10060] Connection timed out

    Action.c(4): Error -27796: Failed to connect to server "10.8.251.101:10086": [10060] Conne ...

  2. Java高级工程师面试宝典

    Java高级工程师面试宝典 JavaSE 多线程 进程与线程的区别? 答:进程是所有线程的集合,每一个线程是进程中的一条执行路径,线程只是一条执行路径. 为什么要用多线程? 答:提高程序效率 多线程创 ...

  3. 第一阶段:Java基础 1.JAVA开发介绍---1.常用的DOS命令

    一,DOS使用常识 DOS的概况:DOS(Disk Operating System)是一个使用得十分广泛的磁盘操作系统.DOS的概况 常见的DOS有两种:IBM公司的PC-DOS和微软公司的MS-D ...

  4. C#常用集合类的实现以及基本操作复杂度

    List 集合类是顺序线性表,Add操作是O(1)或是O(n)的,由于List的容量是动态扩容的,在未扩容之前,其Add操作是O(1),而在需要扩容的时候,会拷贝已存在的那些元素同时添加新的元素,此时 ...

  5. android studio学习----Android Studio导入github下载的工程--替换方法

    http://www.cnblogs.com/liuling/p/2015-9-16-01.html 这种方法是可行的,主要是先自己创建一个project ,然后把没有的文件夹都复制过去就OK了,特别 ...

  6. my97Date如何多选日期且无重复日期

    最终的效果是: 首先引用my97Date的js WdatePicker.js html代码 <textarea cols="" name="txtNoUseDate ...

  7. Linux从入门到放弃、零基础入门Linux(第二篇):在虚拟机vmware中安装linux(一)超详细手把手教你安装centos分步图解

    一.Vmware vmware介绍:VMware,Inc. (Virtual Machine ware)是一个“虚拟PC”软件公司,提供服务器.桌面虚拟化的解决方案.其虚拟化平台的产品包括播放器:它能 ...

  8. 一个APACHE TOMCAT漏洞修复

    这种情况加个SSL证书就行了  就是HTTPS协议

  9. "轻"量级 Java Web 服务框架漫谈

    博文太长了, 还是先说下概要: 框架"轻量"与否可以从两方面来看待: 1) 框架本身的体量 - 例如小 jar 无依赖的苗条框架; 2) 用户使用框架是否获得各种便利而无阻隔(&q ...

  10. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...