无法从角度请求中访问返回的数据

Question

出于某种原因，我无法访问Angular项目中的请求响应。即使我可以在控制台上打印，我也可以访问data.status和data.response，但是当我尝试data.response.entries时，出现以下问题。

我的组件：

transportantions: any[]; //this is on the start of my component together with the rest of my variables 

    getTransportations() { 
    let loader = this.loadingController.create({ 
     content: 'Getting data...' 
    }); 
    loader.present(); 
    this.wpApi.getTransportations() 
     .then(function (data) { 
     console.log(data); 
     if (data.status == 200) { 
      this.transportantions = data.response.entries; 
      loader.dismiss(); 
     } else { 
      console.log('Something was wrong. Error status ' + data.status); 
     } 
     }) 
     .catch(function (err) { 
     loader.dismiss(); 
     console.log('something was wrong: ' + err); 
     }); 
    } 

这是console.log(data)

{ 
    "status": 200, 
    "response": { 
    "total_count": "242", 
    "entries": [ 
     { 
     ... 
     }, 
     { 
     ... 
     }, 
     { 
     ... 
     }, 
     ... 
    ] 
    } 
} 

输出而我得到的错误是：

something was wrong: TypeError: Cannot set property 'transportantions' of undefined

Answer 1

getTransportations() { 
    let loader = this.loadingController.create({ 
     content: 'Getting data...' 
    }); 
    loader.present(); 
    this.wpApi.getTransportations() 
     .then((data) => { // just change the function format 
     console.log(data); 
     if (data.status == 200) { 
      this.transportantions = data.response.entries; 
      loader.dismiss(); 
     } else { 
      console.log('Something was wrong. Error status ' + data.status); 
     } 
     }) 
     .catch(function (err) { 
     loader.dismiss(); 
     console.log('something was wrong: ' + err); 
     }); 
    } 

只是改变功能格式。

将函数（）{}格式更改为this（）=> {}格式以访问'this.transportantions';

更多箭头功能： https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/

Answer 2

你必须使用一个arrow function，而不是一个明确的function，让你保持当前上下文中function范围：

getTransportations() { 
    let loader = this.loadingController.create({ 
     content: 'Getting data...' 
    }); 
    loader.present(); 
    this.wpApi.getTransportations() 
     .then((data) => { 
     console.log(data); 
     if (data.status == 200) { 
      this.transportantions = data.response.entries; 
      loader.dismiss(); 
     } else { 
      console.log('Something was wrong. Error status ' + data.status); 
     } 
     }) 
     .catch(function (err) { 
     loader.dismiss(); 
     console.log('something was wrong: ' + err); 
     }); 
    } 

在您的示例中，this未定义，因为您丢失了function范围中的上下文。