L'obtention de Données de FileReader Angulaire 2

Je suis en train de créer un formulaire d'upload Angulaire 2 ts (2.2.1), qui permet le téléchargement d'un fichier CSV, mais à la place du fichier envoyé directement à un service http, je veux d'abord le fichier à être validé dans le navigateur.

Jusqu'à présent, je peux déjà télécharger un fichier et l'imprimer dans la console avec ce code:

1. Html entrée pour le fichier de téléchargement

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

2. Dans mon angulaire de la composante j'ai mis en place le eventListner et le lecteur de Fichiers.

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

Ce code fonctionne parfaitement bien jusqu'à présent.

Cependant je n'ai pas trouvé un moyen de stocker les données à partir du lecteur d'une manière qui me permet d'y accéder avec mon angulaire composant.

La myReader.onloadend() fonction de rappel n'ont pas accès à la composante de variables. Est-il un moyen pour injecter ces variables?

Comment puis-je obtenir les données lues dans le fileString variable dans mon composant?

OriginalL'auteur kacase | 2016-11-28