数据请求 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. Python - 解释器 - 第三天

    Python解释器 安装好Python3.x之后,我们可以使用文本文件去编写Python代码,编写完成后将扩展名改成.py结尾的文本文件. 想要执行编写好的.py文件就需要用到Python解释器. 解 ...

  2. wsl中的git问题

    当使用wsl打开Windows下的仓库时可能会出现所有文件都被标记为modified,这时一般有两种情况. 文件权限问题 由于wsl申请对文件的读写权限导致文件的权限发生改变.这时只需修改git的设置 ...

  3. Javascript屏蔽Backspace回退页面

    允许对输入框密码框等控件删除字符,但是不允许页面进行回退 <html lang="en" xmlns="http://www.w3.org/1999/xhtml&q ...

  4. ELK——Elasticsearch 搭建集群经验

    本文内容 背景 ES集群中第一个master节点 ES slave节点 迁移到:http://www.bdata-cap.com/newsinfo/1712679.html 本文总结 Elastics ...

  5. JavaScript 总结[目录]

    ECMAScript 基础 一.JavaScript 基础 1.1 JavaScript 简介 1.2 JavaScript 书写位置 二.JavaScript 数据类型 2.1 JavaScript ...

  6. 网商微信实名认证FAQ

    一.商户实名认证简介 基于监管政策.系统风控.用户体验等方面的考虑,我们需要加强对从业机构特约商户的风险管理,升级对商户客户身份识别的认证标准.因此,新入驻的从业机构特约商户要陆续按照新标准完成商户实 ...

  7. ASP.NET----内置对象----Response

    Response对象是HttpResponse类的实例,它代表Web服务器对客户端请求的响应,包含如下功能: ①重定向:  ②设置页面输出内容 (可以向客户端浏览器发送信息,或者将访问转移到另一个网址 ...

  8. Peekaboo(2019年上海网络赛K题+圆上整点)

    目录 题目链接 题意 思路 代码 题目链接 传送门 题意 你的位置在\(O(0,0)\),\(A\)的位置为\((x_1,y_1)\),\(B\)的位置为\((x_2,y_2)\),现在已知\(a=O ...

  9. ReactiveX 学习笔记(29)使用 RxCpp(RxQt)+ Qt 进行 GUI 编程

    课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 下载 ...

  10. CentOS7 安装 vsftpd 服务

    CentOS7 安装 vsftpd 服务 0.FTP简介 FTP服务是一个跨平台的文件共享解决方案 0.1.FTP两种模式的区分:服务端的主被动模式 1)ftp一般分为两种模式,PORTFTP和PAS ...