数据请求 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. vue知识点小结

    vue.js中==和===的区别 1.== 用于比较.判断两者相等,比较时可自动换数据类型 2.=== 用于(严格)比较.判断两者(严格)相等,不会进行自动转换,要求进行比较的操作数必须类型一致,不一 ...

  2. codeforces #578(Div.2)

    codeforces #578(Div.2) A. Hotelier Amugae has a hotel consisting of 1010 rooms. The rooms are number ...

  3. three 3D实例学习

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. vmware关闭嘟嘟嘟嘟警告

    在使用VMware workstation时,安装的windows或者Linux遇到错误操作时,会发生刺耳的嘟嘟声.如何关闭呢?在VMware虚拟机windows系统中的命令提示符处键入以下命令, 然 ...

  5. MYSQL GTID 复制

    MySQL5.7以后都基本用GTID方式复制了,相对于binlog和position号方式,在failover时候减少很多人工切换操作 GTID,global transaction identiti ...

  6. elastic date时区问题解决办法

    之前介绍filter date插件时就谈到时区问题,但是没有说明白.最近在使用range查询时间范围内的数据时出现了数据量不一致的情况.特地了解了下ELK Stack中关于时区的问题. 问题: 使用k ...

  7. sublimeText3和phpstrom使用

    一.sublimtext3 下载地址:http://www.sublimetext.com/3 1.1      安装package control 插件,用来获取和管理插件(sublime包管理工具 ...

  8. Nginx 高级配置--关于favicon.ico

    Nginx 高级配置--关于favicon.ico 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.浏览器会默认帮咱们访问官网的图标 1>.浏览器访问网站"htt ...

  9. xadmin引入django-ckeditor富文本编辑器

    一.安装: pip install django-ckeditor 安装django-ckeditor库 https://github.com/django-ckeditor/django-ckedi ...

  10. 使用istioctl命令查看gateway及virtualservices

    istioctl命令,比kubectl命令,在查看istio资源方面,要方便很多. 如果使用microk8s安装,则命令为microk8s.istioctl了. 查看gateway及virtualse ...