angular - 函数: 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;
}

但是百分比没有更新。它说 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);
}

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