开发者问题收集

Angular 4 返回值未定义

2017-11-15
1399

这是我当前的代码。在这种情况下,我该如何返回 rowData 值?

private createRowData() {
const rowData: any[] = [];

this.http
  .get(`/assets/json/payment.json`)
  .toPromise()
  .then(response => response.json())
  .then(data => {
    data.items.map(elem => {
      rowData.push({
        id: elem.id,
        total_amount: elem.total_amount,
        status: elem.status,
        sent: elem.sent,
      });
    });
  });
return rowData;}

我曾尝试在返回之前对 rowData 进行控制台控制,但结果却显示 undefine。

2个回答

您的方法应该返回转换后数据的承诺。在最后一个 then 回调中,您应该返回转换后的响应。您可以依靠箭头函数的隐式返回来执行此操作。您不需要变量 rowData,因为 array.proptype.map 返回一个新数组,其中的每个值都经过转换。您所要做的就是:

private createRowData() {
   return this.http    // Return the promise
    .get(`/assets/json/payment.json`)
    .toPromise()
    .then(response => response.json())
    .then(data => data.items.map(elem => ({   // Return the transformed data by the then callback
        id: elem.id,
        total_amount: elem.total_amount,
        status: elem.status,
        sent: elem.sent,
     })));
}

然后您可以像下面这样使用此方法:

this.createRowData().then(rowData => console.log(rowData))
Faly
2017-11-15

您正在进行异步 http 调用。执行 return rowData; 行时,调用不完整,因此您得到 undefined。要解决此问题,请从函数中返回一个承诺,并使用 .then() 调用从您调用函数的任何位置检索 rowData

private createRowData() {
  const rowData: any[] = [];

  return this.http  // <- Return promise
   .get(`/assets/json/payment.json`)
   .toPromise()
   .then(response => response.json())
   .then(data => {
     data.items.map(elem => {
      rowData.push({
        id: elem.id,
        total_amount: elem.total_amount,
        status: elem.status,
        sent: elem.sent
      });
      return rowData;
    });
  });
 //return rowData; // <- This is undefined because the call isn't complete yet
}

ngOnInit() {
  this.createRowData().then(data => {
    console.log(data) // <- rowData
  });
}
Aamir Khan
2017-11-15