Angular2 + TypeScript + FileReader.onLoad = la propriété n'existe pas

Question

J'utilise FileReader Interface et c'est une méthode asynchrone readAsText () pour lire un fichier texte local, après cela quand onload event est appelé, J'essaie de lire mon fichier, mon code source est quelque chose comme ceci:

export class ReadFileComponent {
   text: string;

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

la compilation a échoué car la propriété "" texte " n'existe pas sur le type " FileReader "

Je pense que cela est dû à l'interface EventListener qui n'accepte pas les objets,

quelqu'un a-t-il résolu ce genre de problème?

merci les gars,

Answer 1

Si vous souhaitez utiliser this à l'intérieur du rappel, utilisez une fonction flèche, sinon cela ne fonctionnera pas

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

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

Answer 2

Vous utilisez une fonction javascript régulière ici:

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

Le this appartient à la fonction et non à votre classe.

Utiliser la fonction flèche

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

Ou

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