Question

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

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）：

在箭头函数之前，每个新函数都定义了它自己的这个值（在构造函数的情况下是一个新对象，在严格模式函数调用中是未定义的，如果函数被称为＆＃34，则是上下文对象;对象方法＆＃34 ;等）。事实证明，这是一种面向对象的编程风格。

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

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

1 个答案: