从角度 2 中的对象访问特定值答案

【问题标题】：accessing specific values from Objects in angular 2从角度 2 中的对象访问特定值
【发布时间】：2018-09-13 13:39:37
【问题描述】：

我的 Angular 2 项目中有一个函数

this.fetchedData=  this._visitService.getchartData().toPromise();
console.log("WORKING I HOPE0", this.fetchedData)`

给出输出：

WORKING I HOPE0 
ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
__zone_symbol__state:true
__zone_symbol__value:Array(2)
0:{date: "2018, 03, 14", value: 11}
1:{date: "2018, 03, 15", value: 1}
length:2
__proto__:Array(0)
__proto__:Object`

是否可以访问__zone_symbol__value 以将其作为一个对象整体获取，甚至只是从中检索数据。我尝试使用console.log("WORKING I HOPE0", this.fetchedData.__zone_symbol__value)，但它似乎不起作用。我不是在寻找任何替代方法。所以如果我想知道它是否可能以及为什么或为什么不。

【问题讨论】：

标签： angular object angular2-services angular2-directives

【解决方案1】：

我认为你应该这样做：

this._visitService.getchartData().toPromise().then(data => {
    this.fetchedData = data;
    console.log(data);
})

对于您根据评论的查询，试试这个：

this._visitService.getchartData().toPromise().then(data => {
    this.fetchedData = data;
    console.log(data);
    this.processFetchedData(); // call the function once this.fetchedData is initialized
})

processFetchedData(){
    console.log(this.fetchedData); // check the console
}

【讨论】：

好吧，我试过了，我知道它有效，但之后this.fetchData 仅在该特定函数内可用，但我希望能够在另一个函数内访问它。
不，当您将其分配给 this.fetchData 时，它也可以在函数之外使用，{{ fetchData | json }} 将此行放在您的模板端，您就会明白，它只可用当它初始化时，
我不想要模板中的数据我想要代码中的数据。
@AtulStha ，您可以从那时调用第二个函数，这样第二个函数将在this.fetchedData 初始化后被调用

【解决方案2】：

既然您想知道“为什么”方面：- 您必须首先等待承诺解决。在解析函数的成功处理程序中，您将获得数据。现在，“fetchedData”变量存储了 Promise，它只有 Promise 特定的功能，而“不是”实际数据。解析后，如下所示，您可以检索数据并进行所需的解析。

有效的实际代码是上面@Vivek Doshi 给出的代码，使用'then'函数。

您可以按如下方式添加特定的成功/失败处理程序（如果您需要单独添加）：-

var promise = serviceCall.toPromise();
promise.success( (data) => this.fetchedData = data );
promise.error( (err) => console.log(err.message) );

【讨论】：

【解决方案3】：

在将对象分配给它们之前先初始化您的对象。

this._visitService.getchartData().toPromise().then(data => {
    this.fetchedData = {}; //initialize object
    this.fetchedData = data;
    console.log(data);
})

【讨论】：

【解决方案4】：

Promise 在异步操作完成或失败时处理单个事件。

它返回单个值。
不可取消。
它提供了带有 try/catch 和 async/await 的可读代码。

你应该等待承诺解决，所以这是你需要的：

this._visitService.getchartData().toPromise()
  .then(response => {
    this.fetchedData = response;
    console.log(response);
  })
  .catch(error => { console.log(error) });

如果您的响应来自 http 调用：

this._visitService.getchartData().toPromise()
  .then(response => {
    var json = response.json();
    this.fetchedData = json;
    console.log(json);
  })
  .catch(error => { console.log(error) });

【讨论】：

【解决方案5】：

我在重构代码以使用 async/await 时遇到了同样的问题，在这种情况下忘记在函数调用前加上 await。

添加例如

async MyFunction() {

    this.fetchedData = await this._visitService.getchartData().toPromise();

}

如果这是您的意图（在我的情况下是这样），可能会奏效。

【讨论】：