FileReaderから角2のデータを取得

Question

アップロードフォームをAngular 2 ts（2.2.1）で作成しようとしています。 CSVファイルですが、httpサービスに直接送信されるファイルではなく、ファイルをブラウザで最初に検証する必要があります。

これまでのところ私はすでにファイルをアップロードし、このコードのコンソールでそれを印刷することができます。

1. HTML入力ファイルに対して、私が設定している私の角度成分で

   <input type="file" (change)="changeListener($event)" #input /> 
   

2. をアップロードeventListnerとFileリーダーを使用します。

   export class UploadComponent { 
   
       public fileString; 
   
       constructor() { 
        this.fileString; 
       } 
   
       changeListener($event): void { 
         this.readThis($event.target); 
        } 
   
       readThis(inputValue: any): void { 
        var file: File = inputValue.files[0]; 
        var myReader: FileReader = new FileReader(); 
        var fileType = inputValue.parentElement.id; 
        myReader.onloadend = function (e) { 
         //myReader.result is a String of the uploaded file 
         console.log(myReader.result); 
   
         //fileString = myReader.result would not work, 
         //because it is not in the scope of the callback 
        } 
   
        myReader.readAsText(file); 
       } 
   } 
   

このコードは、これまで完全に正常に動作します。

しかし、角度成分でアクセスできるように、読者からのデータを格納する方法が見つかりませんでした。

myReader.onloadend()コールバック関数は、コンポーネントの変数にアクセスできません。これらの変数を注入する方法はありますか？

コンポーネントの変数fileStringに読み込みデータを取得するにはどうすればよいですか？あなたは、変数にアクセスできるように

myReader.onloadend = (e) => { 
    console.log(myReader.result); 
    this.fileString = myReader.result; 
}; 

：

Answer 1

はこのようにそれを実行してください。

詳細についてはhttps://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions