更新并承诺内部数据angular2查看/全局变量 [英] Update angular2 View/global variable with data inside a promise

问题描述

即时通讯使用取从这样一个外部API获取数据，它是正确打印到控制台。但this.games不这么认为没有更新在全球范围内更新。如何从许内更新的数据，全球GAMS变量一旦获取返回：

 进口{引导，色差，CORE_DIRECTIVES，管，注入}从'angular2 / angular2';
  从./game/game进口{}游戏;
  从./services/API进口{} API;
  进口{} NgZone从'angular2 / angular2';@零件（{
选择：应用程序，
模板：`
你好
＆LT;按钮（点击）=onClickMe（）＆GT;！点击我＆LT; /按钮＆GT;
＆LT; D​​IV * NG-的=类＃游戏游戏=游戏GT＆;
     //布局
＆LT; / DIV＆GT;
`
指令：[CORE_DIRECTIVES，游戏]， }）
出口类应用{
数据：任何;
API：API;
游戏：游戏[];构造函数（API：API）{
    this.api = API;
    this.games = [];
  api.fetchGames（）。然后（功能（响应）{
        this.data =响应;
        的console.log（this.data）;
        变种gamesTemp = [];
        this.teams = this.data.resultSets [1] .rowSet;
        对于（VAR I = 0; I＆LT; this.teams.length  -  1; I + = 2）{
            //操作
        }
        this.games = gamesTemp;
        的console.log（this.games）;
    }）;
 

和这个它fetchGames方式：

  fetchGames（）{    返回fetch('http://stats.nba.com/stats/scoreboardV2?DayOffset=0&LeagueID=00&gameDate=11%2F5%2F2015')
        。然后（功能（响应）{
            返回response.json（）;
        }）赶上（功能（前）{
            的console.log（'解析失败'，前）;
        }）;
}
 

解决方案

这似乎是一个范围（这个）的问题。你的这个里面的回调是不是你的课！最简单的解决方案是使用 ES6箭头功能

 进口{引导，色差，CORE_DIRECTIVES，管，注入}从'angular2 / angular2';
  从./game/game进口{}游戏;
  从./services/API进口{} API;
  进口{} NgZone从'angular2 / angular2';@零件（{
选择：应用程序，
模板：`
你好
＆LT;按钮（点击）=onClickMe（）＆GT;！点击我＆LT; /按钮＆GT;
＆LT; D​​IV * NG-的=类＃游戏游戏=游戏GT＆;
     //布局
＆LT; / DIV＆GT;
`
指令：[CORE_DIRECTIVES，游戏]， }）
出口类应用{
数据：任何;
API：API;
游戏：游戏[];构造函数（API：API）{
    this.api = API;
    this.games = [];
  api.fetchGames（）然后（（响应）=方式＆gt; {// ES6箭头功能是为了解决这个问题！
        this.data =响应;
        的console.log（this.data）;
        变种gamesTemp = [];
        this.teams = this.data.resultSets [1] .rowSet;
        对于（VAR I = 0; I＆LT; this.teams.length  -  1; I + = 2）{
            //操作
        }
        this.games = gamesTemp;
        的console.log（this.games）;
    }）;
 

Im using fetch to get data from an external API like this and it is printing to the console correctly. But this.games doesn't update in the global scope so the view isn't updating. How can I update the global gams variable with the data from within the promise once the fetch has returned :

  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);
    });

and this it the fetchGames method:

 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);
        });
}

解决方案

This seems like a scope (this) problem. Your this inside the callback is not your class! The simplest solution is to use 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查看/全局变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！