Angular2 + Typescript + FileReader.onLoad = property does not exist

Question

I am using the FileReader Interface and it’s asynchronous method readAsText() to read a local text file, After that when the onload ev

Answer 1

You are using a regular javascript function here:

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

The this belongs to the function not your class.

Use arrow function

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

Or

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

Answer 2

If you want to use this inside the callback, use an arrow function, otherwise it won't work

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

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