イベントが終了した場合、メソッドを実行するにはどうすればよいですか？

Question

小さなwebappを作成して画像をアップロードしようとしました。

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

角度では、イメージを配列に追加し、ユーザーが手順を完了した場合にアップロードを実行するために、次のコードを実行します。いいえ、input.filesの値を表示したいだけです。

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

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

私は、エラーCannot read property 'files' of nullを受け取ります。 google cromeでコマンドラインを実行すると、選択したファイルにfilesが存在することがわかります。

それはtimeingの問題のように見えますが、私はそれを修正する見当がつかない。リスナーの後でメソッドを実行する方法がAngular2にありますか？または、このような考えのための他のユーザケースがありますか？

Answer 1

最も簡単な方法 - 使用してライフサイクルフック（おそらくngAfterContentInitまたはngAfterViewInit）：それを行うには documentation

右の方法 - @ViewChild使用： documentation

更新：申し訳ありませんが、おそらくあなたがする必要はありませんあなたの入力を@Componentの中で参照することは全くありません。試してみてください

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