在 Angular2 中获取

Question

这里使用fetch的正确方法是什么？现在我的应用程序正在后台加载 JSON（我可以在 Chrome 的开发人员工具中看到它）但是 this.games 在执行后未定义，我不知道为什么。我假设我返回的数据有误。

现在我的 app.ts

里有这个

import {bootstrap, Component, View, CORE_DIRECTIVES, Pipe} from 'angular2/angular2';
import { Game } from './game/game';
import { API } from './services/API';
@Component({    
    selector: 'app',
    template: `
    {{games}}
            `,
    directives: [CORE_DIRECTIVES, Game]
})
export class App {
    games: any;
    constructor(api: API) { 
        api.fetchGames().then(function(json){
            this.games = json;
        });
    };


}
bootstrap(App, [API]);

和我的 API.ts:

declare var Zone, fetch, Request;
export class API {
    data: any;
    fetchGames() {
        return fetch('http://stats.nba.com/stats/scoreboardV2?DayOffset=0&LeagueID=00&gameDate=11%2F5%2F2015',{mode:'no-cors'})
            .then(function(response){
                return response.json();
            })
    }
}

Answer 1

我想这和 . The problem is in scope ('this') - 'this' inside promise callback is not the class. The simplest es6 solution is to change to es6 arrow function:

是同一个问题

import {bootstrap, Component, CORE_DIRECTIVES, Pipe, Inject} from 'angular2/angular2';
  import { Game } from './game/game';
  import { API } from './services/API';
  import {NgZone} from 'angular2/angular2';

@Component({    
selector: 'app',
template: `
Hello
<button (click)="onClickMe()">Click me!</button>
<div *ng-for="#game of games" class = "game">
     //layout
</div>
`,
directives: [CORE_DIRECTIVES, Game],

 })
export class App {
data: any;
api: API;
games: Game[];

constructor(api:API) { 
    this.api = api;
    this.games = [];  
  api.fetchGames().then((response) => { //es6 arrow function will preserve class' 'this'
        this.data = response;
        console.log(this.data);
        var gamesTemp = [];
        this.teams = this.data.resultSets[1].rowSet;
        for (var i = 0; i < this.teams.length - 1; i += 2) {
            //manipulate            
        }
        this.games = gamesTemp;
        console.log(this.games);
    });

在 Angular2 中获取

Fetch in Angular2

angular