无法在Ionic2的Callback中访问本地属性

Question

我有一个使用Angular2的基本Ionic 2应用程序。 我有一个基本但令人沮丧的问题。 这是我的组件...

import {Component} from "@angular/core";

@Component({
  '<ion-content>{{id}}</ion-content>
});

export class ListPage {

    constructor(nav, navParams) {
       this.id = "123";

       //This could be any method (ajax call or just an event emitter)
       asyncMethodWithCallBack(function(result)
       {
           this.id = result; //Cannot find this.id
       }
    }
}

问题是当我的应用尝试将自身附加到带有回调的方法上时，当回调触发时，它不再能够找到this.id范围。

我必须在这里做一些简单的事情，但是我对新的作用域了解不正确。

Answer 1

您应该使用箭头功能才能使用此词汇：

asyncMethodWithCallBack((result) => 
   {
       this.id = result; //Cannot find this.id
   });

从MDN中提取（ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions ）：

在使用箭头函数之前，每个新函数都定义了自己的值（对于构造函数，是新对象，在严格模式函数调用中未定义，如果函数被称为“对象方法”，则为上下文对象，等等）。 事实证明，这是一种面向对象的编程风格，令人讨厌。

箭头函数捕获封闭上下文的this值。