在内部函数打字稿中访问外部变量

时间:2018-02-20 08:52:41

标签: javascript typescript

我在函数外面有一个变量需要更改值。我通常使用"这个"要在代码的那一点访问变量,"这个"无法访问。

export class GamesDetailPage {

  details : any = {};
  type : String;
  level : Number; 
  cards : any = {}; // THE VARIABLE I WANT TO SET THE VALUE


  constructor(public navCtrl: NavController, public http: HttpClient , private device: Device, private serviceProvider: ServicesProvider,     
                                            public navParams: NavParams
) {
    this.type = navParams.get('gameType');
    this.level = navParams.get('gameLevel');
  }

  ionViewDidLoad() {


    this.getCards();  // WHERE I CALL THE METHOD  
  }


  getCards(){
    var deviceUUID = this.device.uuid;
    var platform =  this.device.platform;
    var cardsReq = {"gameType": this.type ,"gameLevel": this.level};
    var dialog = this.dialogs;

   this.serviceProvider.getCards(deviceUUID, platform, cardsReq)

    .then(function (res){
      this.cards = res;// HERE I WANT TO SET THE VARIABLE BUT "THIS" IS UNDEFINED
    })
    .catch(function(err){
      console.log("Error");
    })
  }
}

3 个答案:

答案 0 :(得分:2)

在这里您需要使用ES6 arrow function,因为之前的(function(){方法this并未引用该类,但在es6中它将引用它...

  

箭头函数表达式的语法比函数表达式短,并且没有自己的

.then( 
(res) => {
      this.cards = res; // Should work now
    }
)

答案 1 :(得分:1)

因为外部this被函数this遮蔽。 最直接的方式也是推荐的方法是在打字稿中使用箭头功能。

将lambda函数更改为:

(res) => {}

另一个旧解决方案是将this保存到临时变量:

that = this

然后访问lambda函数中的内容。

答案 2 :(得分:1)

在JavaScript中this与当前函数有关。 TypeScript在转换代码时隐藏了这一事实。

因此,您可以做两件事。

首先你可以使用ES6箭头功能(TypeScript会为你做this范围确定)

.then((res) => {
    this.cards = res;
})

或者你可以自己处理

getCards(){
    var _this = this;

    // More code

    .then(function (res){
        _this.cards = res;
    })

如果检查两种情况的转换输出,它们应该几乎相同