2016-10-11 2 views
2

У меня есть следующий компонент, загрузите файл и связать его содержимое в виде строкиполучить значение из FileReader в угловом 2

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"]); 
     } 
    } 

проблема заключается в том, что this.csvChange не определена внутри onLoadCallback так, как я мог бы передать результат к некоторой переменной в моем компоненте?

Я был поиск другой подобный question но никогда не получить результат за пределами функции onloadCallback

ответ

5

Проблема заключается в том, что контекст теряется, когда вы делаете:

reader.onload = this.onLoadCallback; 

Одно из решений:

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

Другим является:

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

Еще один один:

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

Нижняя линия. Убедитесь, что контекст this всегда остается внутри вашего class.

+0

спасибо, что я использую первые решения, и это работает – oriaj

Смежные вопросы