角度HTTP GET要求が期待通りに機能しない

Question

私は次のURLから情報を取得しようとしています：https://fantasy.premierleague.com/drf/entry/2241/event/14/picks。

{ "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": true, "value": { "url": "https://fantasy.premierleague.com/drf/entry/2241/event/14/picks", "body": null, "reportProgress": false, "withCredentials": false, "responseType": "json", "method": "GET", "headers": { "normalizedNames": {}, "lazyUpdate": null, "headers": {} }, "params": { "updates": null, "cloneFrom": null, "encoder": {}, "map": null }, "urlWithParams": "https://fantasy.premierleague.com/drf/entry/2241/event/14/picks" }, "scheduler": null }, "operator": { "concurrent": 1 } }, "operator": {} }, "operator": {} } 

例を私の問題を示す：ブラウザでこれを貼り付けることは私の代わりに、次の取得、しかし角度

{"active_chip":"","automatic_subs":[{"id":54265617,"element_in":367,"element_out":264,"entry":2241,"event":14}],"entry_history":{"id":65471706,"movement":"new","points":51,"total_points":948,"rank":2041408,"rank_sort":2041432,"overall_rank":1,"targets":null,"event_transfers":1,"event_transfers_cost":0,"value":1030,"points_on_bench":-1,"bank":12,"entry":2241,"event":14},"event":{"id":14,"name":"Gameweek 14","deadline_time":"2017-11-28T18:45:00Z","average_entry_score":14,"finished":false,"data_checked":false,"highest_scoring_entry":5368938,"deadline_time_epoch":1511894700,"deadline_time_game_offset":0,"deadline_time_formatted":"28 Nov 18:45","highest_score":76,"is_previous":false,"is_current":true,"is_next":false},"picks":[{"element":260,"position":1,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":100,"position":2,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":34,"position":3,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":13,"position":4,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":367,"position":5,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":501,"position":6,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":234,"position":7,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":104,"position":8,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":108,"position":9,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":472,"position":10,"is_captain":false,"is_vice_captain":true,"multiplier":1},{"element":394,"position":11,"is_captain":true,"is_vice_captain":false,"multiplier":2},{"element":286,"position":12,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":264,"position":13,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":405,"position":14,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":548,"position":15,"is_captain":false,"is_vice_captain":false,"multiplier":1}]} 

にHTTP GET要求を使用しているとき、私は取得することが予想実際のデータを示しています。 https://stackblitz.com/edit/http-basics-zvqfxs

EDIT：明らかにCORSの問題で、インストールするとthis extensionが私のために修正されました。

Answer 1

次のようにこの

getPlayers() { 
    this.http.get(this.ROOT_URL).subscribe(data => { 
     console.log(data); 
     //this.players = data; 
    }); 
} 

Answer 2

完了コードの使用subscribe()とその私のローカルコンピュータに私のために働いたときに私のセットアップ私のデータ、しかし、あなたはを実行しているので、それがhttps://http-basics-zvqfxs.stackblitz.io/ウェブサイトで失敗を返すRESTサービスエラーの上にあなたのバックエンドのRESTサービスを解決するためのクロスドメインリクエスト、および与えるエラー

XMLHttpRequest cannot load 
https://fantasy.premierleague.com/drf/entry/2241/event/14/picks. No 'Access- 
Control-Allow-Origin' header is present on the requested resource. Origin 
'https://http-basics-zvqfxs.stackblitz.io' is therefore not allowed access. 

それがクロスドメインリクエストを許可する必要があり、変更する必要があります。

ローカルマシンで動作するコード（角度コードはすでにクロスドメインリクエストの設定です）

import { Component } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { Http, Headers, RequestOptions, Response, ResponseContentType } from '@angular/http'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

    readonly ROOT_URL = 'https://fantasy.premierleague.com/drf/entry/2241/event/14/picks'; 

    players: string; 

    constructor(private http: Http) { } 

    getPlayers() { 
     let headers = new Headers({ 
      'Content-Type': 'application/json', 
      'Access-Control-Allow-Origin': '*', 
      'Access-Control-Allow-Credentials': 'true' 
     }); 
     let options = new RequestOptions({ headers: headers }); 

     this.http.get('https://fantasy.premierleague.com/drf/entry/2241/event/14/picks',options) 
      .map((res)=> res.json()) 
      .subscribe((data) => { 
      this.players = data.json(); 
     });; 
    } 
} 

Answer 3

あなたの例によると、問題は、あなたがそれに加入せずに観察可能な使用しています。あなたはこのように見えるためにあなたのgetPlayers方法を変更する必要があり ：

this.http.get(this.ROOT_URL).subscribe(res=>this.players=res);