Angularリクエストから返されたデータにアクセスできない

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.transportantions'へのアクセスを得るためにfunction（）{}フォーマットをthis（）=> {}フォーマットに変更します。

矢印関数の詳細

： https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/

Answer 2

あなたはfunctionの範囲に現在のコンテキストを維持することができ、代わりに明示的なfunctionのarrow 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); 
     }); 
    } 

例では、functionスコープのコンテキストを失ったため、thisは未定義です。