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

Posted 2023-02-15

【中文标题】Angular2 + Typescript + FileReader.onLoad = 属性不存在

【英文标题】：Angular2 + Typescript + FileReader.onLoad = property does not exist

【发布时间】：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 接口不接受对象，

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

谢谢大家，

【参考方案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;