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

【问题标题】：Angular2 + Typescript + FileReader.onLoad = property does not existAngular2 + Typescript + FileReader.onLoad = 属性不存在
【发布时间】：2017-06-03 21:44:30
【问题描述】：

我正在使用 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"

上不存在

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

请问有人解决了这种问题吗？

谢谢大家，

【问题讨论】：

标签： javascript angular typescript filereader

【解决方案1】：

如果要在回调中使用this，请使用箭头函数，否则不起作用

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

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

【讨论】：

不，它适用于 console.log(reader.result)，问题在于“this”意味着 currentTarget 属性是 EventTarget 类型，而不是 ReadFileComponent 类的类型
这就是为什么你需要使用()=> 而不是function ()。箭头函数确保回调中的this 一直指向当前类。
对..也许this会澄清它
不幸的是，“reader.onload”部分似乎在生产中不起作用[在 ng build — prod 之后]。原因是非 Angular 版本是： reader.onload = function(evt) { } 因为这不使用箭头函数，所以没有传入父上下文。在 Angular 中，我们需要访问父上下文，因此使用箭头函数。实际发生的情况是，使用箭头函数将整个“onload”函数传递给“reader.result”。
让 FileReader: new() => FileReader = ((window as any).FileReader as any).__zone_symbol__OriginalDelegate;让阅读器=新文件阅读器（）；这允许将事件正确传递给“onload”，这反过来又允许我们使用“event.target.result”

【解决方案2】：

您在这里使用的是常规的 javascript 函数：

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

this 属于函数而不是你的类。

使用箭头函数

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

或者

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

【讨论】：