使用承诺中的数据更新 angular2 View/global 变量

Question

我像这样使用 fetch 从外部 API 获取数据，它正确地打印到控制台。但是 this.games 不会在全局范围内更新，因此视图不会更新。一旦获取返回，我如何使用承诺中的数据更新全局 gams 变量：

  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(function(response) {
        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);
    });

这是 fetchGames 方法：

 fetchGames() {

    return fetch('http://stats.nba.com/stats/scoreboardV2?DayOffset=0&LeagueID=00&gameDate=11%2F5%2F2015')
        .then(function(response) {
            return response.json();
        }).catch(function(ex) {
            console.log('parsing failed', ex);
        });
}

Answer 1

这似乎是范围 (this) 问题。您在回调中的 this 不是您的 class！最简单的解决方案是使用 es6 arrow functions:

 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 was meant to solve this problem!
        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 View/global 变量

Update angular2 View/global variable with data inside a promise

javascript

angular