时间戳

首页 > 解决方案 > Angular 8：无法访问在 FileReader onloadend 方法中设置的类变量

angular - Angular 8：无法访问在 FileReader onloadend 方法中设置的类变量

问题描述

我无法访问在 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)

}

到目前为止，我已经尝试了 3 种方法，但都没有奏效。以下是他们：

  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; }

我已经看到了大部分解决方案，但没有一个对我有用。请让我知道我在哪里出错。谢谢你。

标签： angular

解决方案

我不认为这里的问题是由this关键字引起的。你this点到了正确的地方，但没有分配给this.fileContent变量。

this.fileContent设置在异步代码块中。你的赋值会在你之后执行console.log，因为fileReader.onloadend它只是一个监听器，类似于onclickDOM 中的监听器。

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代码，理解它是必不可少的。

推荐阅读