Wie starte ich eine Methode, wenn das Ereignis beendet ist?

Question

Ich versuche eine kleine Webapp zu erstellen, um Bilder hochzuladen.

<input type="file" id="imageUpload" name="image" (change)="imageToList()" accept="image/*" capture> 

In Angular ich den folgenden Code, um das Bild zu einem Array hinzuzufügen und den Upload durchführen, wenn der Benutzer mit seinem proced beendet hat. Nein, ich möchte nur die Werte in den input.files anzeigen.

constructor() { 
     this.input = document.getElementById('imageUpload') ; 
    } 

    imageToList() { 
     console.info(this.input.files[0]); 
    } 

Ich erhalte den Fehler, Cannot read property 'files' of null. Wenn ich die Befehlszeile in Google Crome ausführe, sehe ich, dass files mit der gewählten Datei existiert.

Es sieht aus wie ein timeing Problem, aber ich habe keine Ahnung, es zu beheben. Gibt es in Angular2 eine Möglichkeit, eine Methode nach einem Listener auszuführen? Oder gibt es einen anderen Benutzerfall für solche Gedanken?

Answer 1

einfachste Art und Weise - mit Haken Lifecycle (wahrscheinlich ngAfterContentInit oder ngAfterViewInit): documentation

richtiger Weg, es zu tun - mit @ViewChild: documentation

aktualisieren: sorry, wahrscheinlich brauchen Sie nicht einen Bezug auf Ihre Eingabe innerhalb von @Component überhaupt haben. Versuchen Sie

(change)="imageToList($event)" 
imageToList(event: any): void{ 
    console.log(event); 
}