Angular 2でFileReaderを使用してファイルをアップロードしてデータを読み取る

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

これまでのところ、次のコードを使用してファイルをアップロードし、コンソールで印刷することができます。

ファイルアップロードのためのHTML入力

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

私のangularコンポーネントで、eventListnerとファイルリーダーを設定しました。

_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);
    }
}
_

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

ただし、リーダーからのデータをmy angularコンポーネントでアクセスできるようにする方法で、データを保存する方法が見つかりませんでした。

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

読み取りデータをコンポーネントのfileString変数に入れるにはどうすればよいですか？

javascriptangulartypescriptfilereader

2016/11/28kacase

mxiiの回答は暗黙的に文字列にキャストされますが、これは私には機能しませんでした。おそらく、angularの新しいバージョンでは、もう許可されていません。

私にとって何がうまくいったか

JSON.parse(fileReader.result as string)

2019/08/20emrhzc