函数内函数：Angular 2

Question

我在 Angular2 中使用这个函数（cordova 插件的一部分）：

download()
{
//some download stuff

// ==> here this.percentage=50 works

//show progress of download
 this.fileTransfer.onprogress = function(progressEvent) {
  if (progressEvent.lengthComputable) {
      console.log((progressEvent.loaded / progressEvent.total)); // works great
      this.setpercentage((progressEvent.loaded/progressEvent.total)*100) // doesn't work
      } else {}
  }
}

setpercentage(perc)
{
  this.percentage = perc;
}

但是percentage不更新了。它说setpercentage()不是一个函数。

我是 Angular 的新手，我在某处读过关于箭头函数的内容。所以我试了一下，把它改成了：

this.fileTransfer.onprogress((progressEvent)=>{
    if (progressEvent.lengthComputable) {
        console.log((progressEvent.loaded / progressEvent.total));
        this.setpercentage((progressEvent.loaded/progressEvent.total)*100)
    } else {}
});

但这打破了整个剧本。控制台日志不再显示百分比。

我究竟做错了什么？

更新：我尝试了@echonax建议，但没有运气：

download()
{
        this.setpercentage(50); <-- works

        this.fileTransfer.download(**download stuff**);

        var self = this; // store outer this in a variable
        this.fileTransfer.onprogress = function(progressEvent) {
            if (progressEvent.lengthComputable) {
                console.log((progressEvent.loaded / progressEvent.total)); // works great
                self.setpercentage(60); // <-- doesn't work
            } else {}
        }
}

setpercentage(perc)
{
    this.percentage = perc;
}

Answer 1

改变

this.fileTransfer.onprogress = function(progressEvent) {

到

this.fileTransfer.onprogress = (progressEvent)=> {

你this不是指你的组件

这类似于做

var self = this; // store outer this in a variable
this.fileTransfer.onprogress = function(progressEvent) {
  if (progressEvent.lengthComputable) {
      console.log((progressEvent.loaded / progressEvent.total)); // works great
      self.setpercentage(60, self) // <-- use it here
      } else {}
}

setpercentage(perc, self)
{
    setTimeout(()=>{
      self.percentage = perc;
    },0);
}

但是使用第二种方法，您this的setpercentage方法内部将引用函数实例而不是组件