erhalten den Wert von einem Filereader in Angular 2

Question

habe ich die folgende Komponente, die eine Datei zu laden und binden seinen Inhalt als String

export class NgCsvComponent { 

     @Input() csv: any; 

     @Output() csvChange: any = new EventEmitter(); 

     public localCsv : any = ''; 

     constructor() { } 

     changeListener($event): void { 
     this.readFile($event.target); 
     } 

     readFile (inputValue : any) : void { 
     let reader = new FileReader(), 
       file : File = inputValue.files[0]; 
      reader.readAsText(file);  
     reader.onload = this.onLoadCallback; 
     } 

     onLoadCallback (event) { 
      this.csvChange.emit(event.target["result"]); 
     } 
    } 

das Problem ist, dass this.csvChange innerhalb onLoadCallback so nicht definiert ist, wie ich das Ergebnis passieren konnte zu einer Variablen in meiner Komponente?

Ich war Suche ähnliche question aber nie das Ergebnis außerhalb von onloadCallback Funktion

Answer 1

Das Problem ist, erhalten, dass der Kontext verloren, wenn Sie das tun:

reader.onload = this.onLoadCallback; 

Eine Lösung ist:

reader.onload = (e: Event) => { 
    this.onLoadCallback(e); 
} 

Eine andere ist:

reader.onload = this.onLoadCallback.bind(this); 

Noch ein anderer ist:

onLoadCallback = (event) => { 
    this.csvChange.emit(event.target["result"]); 
} 

Unterm Strich. Stellen Sie sicher, dass der this Kontext immer in Ihrer class bleibt.