角2読み込み入力ファイル

Question

入力ファイルを角2で使用する方法を理解しようとしています。以下の例では、アップロードしたファイルの名前をコンソールに記録します。残念ながら、このコードはエラーCannot read property 'target' of undefinedを送信します。

マイcomponent.html

<input 
    id="imageUpload" 
    type="file" 
    (change)="imageRun(input)"/> 

マイcomponent.ts

imageRun(input){ 
    var files = input.target.files[0]; 
    console.log(files.name); 
} 

私はに実行したとして、私は、この問題に対する角度具体的な解決策があるかどうかわかりませんよ普通のjavascriptでこれを行うと同じ問題が発生します。 JS内のaddEventListenerメソッドを使用して、HTMLでこれらのトリガーを割り当てるのではなく、私が持っているいくつかのプレーンなJSチュートリアルを見てきました。しかし、これらの方法は、わかっている限り、実際にAngular 2プロジェクトには適用されません。

参考までに、参考のために、プレーンJavaScriptでほとんど同じことを行い、srcスクリプト内でaddEventListenerを使用しているのはan exampleです。

Answer 1

inpitファイル要素&にローカルテンプレート変数を定義して、コンポーネント内で使用することができます。

<Input #myInput 
    id="imageUpload" 
    type="file" 
    (change)="imageRun(myInput)"/> 

imageRun(input){ 
    var file = myInput.files[0]; 
    console.log(file.name); 
}