無法從角度請求中訪問返回的數據

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範圍中的上下文。