[英]Update angular2 View/global variable with data inside a promise
我正在使用fetch从这样的外部API获取数据,并且可以正确打印到控制台。 但是this.games不会在全局范围内更新,因此视图也不会更新。 提取操作返回后,如何使用promise中的数据更新全局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);
});
}
这似乎是一个范围( this
)问题。 您在回调中的this
不是您的课程! 最简单的解决方案是使用es6箭头功能 :
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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.