对象不在同一服务Angular中按功能更新

时间:2017-12-26 14:18:23

标签: javascript angular

我创建了一个函数(callPlayerData),用于通过数据库中的数据替换object(playerData)中的数据。

功能和对象在同一服务中:

import  { Injectable } from '@angular/core';
import { Http } from '@angular/http';

interface PlayerData {
    name: string,
    level: number,
    truc: number,
    xp: number,
    xp_max: number,
    vie: number,
    vie_max: number
}

@Injectable()
export class PlayerService {
    constructor(private http: Http){
    }

    playerId = null;

    playerData: PlayerData = {
        name : "unwn",
        level : 5,
        truc : 36,
        xp: 0,
        xp_max: 0,
        vie: 0,
        vie_max: 0
    };

    callPlayerData(callback) {
        let that = this,
        loader = document.getElementById("loader");
        loader.style.display = "block";

        this.http.post(`api/gameData`, {id : that.playerId})
        .subscribe(response => {
            let gameData = JSON.parse(response.text()),
            item = 0;

            for (const key in gameData) {
                if (that.playerData[key]) {
                    that.playerData[key] = gameData[key];
                }
                item++;
                if(item === Object.keys(gameData).length) {
                    //that.playerData = Object.assign(JSON.parse(response.text()));
                    console.log(that.playerData);
                    setTimeout(() => {
                        loader.style.display = "none";
                        callback();
                    }, 400);
                }
            }
        }, error => {
            console.log(JSON.stringify(error.json()));
        });
    }
}

ForIn末尾的console.log(that.playerData)返回更新的数据,但我在组件中有另一个console.log()。

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { Router } from '@angular/router';

import { PlayerService } from '../../player.service';

@Component({
  selector: 'stats-section',
  templateUrl: './stats.component.html'
})
export class StatsComponent implements OnInit {
    constructor(private http: Http, private router: Router, private player: PlayerService) {
    }

  ngOnInit() {
    console.log(this.player.playerData);

    setTimeout(() => {
      console.log(this.player.playerData);
    }, 1000);
  }
}

此console.log()返回对象的初始数据,而不是函数更新的数据。

如何获取组件中的更新数据?

提前感谢!

0 个答案:

没有答案