Angular2 + Typescript + FileReader.onLoad = 属性 不存在

Question

我正在使用 FileReader 接口 和它的异步方法 readAsText() 来读取本地文本文件， 之后当调用 onload 事件 时，我尝试读取我的文件，我的源代码如下所示：

export class ReadFileComponent {
   text: string;

   readFile(): void {
     let reader=new FileReader();
     reader.onload = function(e) {
        this.text=reader.result;
     }
     reader.readAsText(file);   
   }
}

编译失败，因为 属性 "text" 在类型 "FileReader"[ 上不存在=13=]

我认为这是由于 EventListener 接口不接受对象，

有人解决过这类问题吗？

谢谢大家，

Answer 1

如果要在回调中使用this，请使用箭头函数，否则无法使用

reader.onload = (e) => {
    this.text=reader.result;
}

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

您在此处使用的是常规 javascript 函数：

 reader.onload = function(e) {
        this.text=reader.result;
     }

this 属于的函数不是你的 class。

使用箭头函数

reader.onload = (e)=> {
            this.text=reader.result;
         }

或者

self = this;
 reader.onload = function(e) {
        self.text=reader.result;
     }