码迷,mamicode.com
首页 > 其他好文 > 详细

angular get 数据请求

时间:2019-11-14 18:10:27      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:div   自带   option   game   接收   service   res   tor   size   

数据请求 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 数据请求

标签:div   自带   option   game   接收   service   res   tor   size   

原文地址:https://www.cnblogs.com/rockyjs/p/11858831.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!