Angular 8:无法访问在FileReader onloadend方法内部设置的类变量

Question

我无法访问在FileReader onloadend方法中设置的类变量。

这是我的代码：

analyzeData(){
let file = this.fileRestful[0];
let fileReader: FileReader = new FileReader();
fileReader.onloadend = () => {
this.fileContent= fileReader.result as string;
}
fileReader.readAsText(file);
console.log(this.fileContent)

}

到目前为止，我已经尝试了三种方法，但都不起作用。以下是：

1. fileReader.onloadend = () => { this.fileContent= fileReader.result as string; }

2. fileReader.onloadend = function(e) = { this.fileContent= fileReader.result as string; }.bind(this)

3. let self = this; fileReader.onloadend = function(e) = { self.fileContent= fileReader.result as string; }

我已经看过大部分解决方案，但没有一个对我有效。请告诉我哪里出错了。非常感谢。

Answer 1

我不认为这里的问题是由this关键字引起的。您的this正好指向正确的位置，但没有为this.fileContent变量指定任何内容。

CCD_ 7被设置在异步代码块中。您的赋值将在console.log之后执行，因为fileReader.onloadend只是一个监听器，类似于DOM中的onclick监听器。

fileReader.onloadend = () => {
this.fileContent= fileReader.result as string; // this code will be executed some time in the future
}
fileReader.readAsText(file);
console.log(this.fileContent); // this code will be executed first

换句话说，在第一行中，您向loadend事件添加了一个事件侦听器。您的箭头功能将在loadend发生时执行，而不是立即执行。它什么时候会发生——我们不知道，也许在三年后，也许在0.0002秒内，但肯定是在执行完其余代码之后。

解决方案

当您将console.log移到代码的异步部分时，它将反映现实，如下所示：

fileReader.onloadend = () => {
this.fileContent= fileReader.result as string; // this code will be executed some time in the future
console.log(this.fileContent); // and after that you do your console.log
}
fileReader.readAsText(file);

setTimeout、on*处理程序和addEventListener中的代码是我们需要始终记住代码执行时间的示例。它可以在同步代码后三秒或三年执行。我建议阅读的一个规范资源是关于MDN的这一节。这有很多，但为了编写js代码，理解是必不可少的。