如果事件已经完成，如何运行方法？

Question

我尝试创建一个小型webapp来上传图片。

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

在Angular中，我运行以下代码将图像添加到数组，并在用户完成其程序时执行上传。不，我只是想在input.files中显示值。

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

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

我收到错误Cannot read property 'files' of null。如果我在google crome中运行命令行，我会看到选择的文件存在files。

这看起来像一个时间问题，但我不知道要解决它。 Angular2中有一种方法可以在侦听器之后运行方法吗？或者是否有其他用户认为是这样的？

Answer 1

最简单的方法 - 使用Lifecycle钩子（可能是ngAfterContentInit或ngAfterViewInit）： documentation

正确的方法 - 使用@ViewChild： documentation

更新：抱歉，您可能根本不需要在@Component内引用您的输入。尝试

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