Javascript 按“上载文件”按钮时，无法读取未定义的属性“文件”时出错

我在angular 7项目上工作

我面临的问题时，选择文件，然后按下按钮上传得到选定的文件

然后显示错误无法读取未定义的属性“文件”

如下

DeliverySystemComponent.html:25 ERROR TypeError: Cannot read property 'files' of undefined
   

这实际上是我的问题

那么如何解决这个问题呢

我尝试的是

交付html组件

<app-custom-upload #cusUpload nbTooltip="upload excel file" nbTooltipPlacement="bottom"
      nbTooltipStatus="primary" (complete)="handleFileInput($event.target.files)"></app-custom-upload>

<button (click)="uploadFile(files)" class="btn btn-link" style="margin-right: 0px">
          <i nbTooltip="Import Template" nbTooltipPlacement="bottom" nbTooltipStatus="primary">
            <nb-icon icon="cloud-upload-outline"></nb-icon>
          </i>
        </button>

使用时

<input type="file"  
             id="file"  
             (change)="handleFileInput($event.target.files)"> 

而不是

  <app-custom-upload #cusUpload nbTooltip="upload excel file" nbTooltipPlacement="bottom"
          nbTooltipStatus="primary" (complete)="handleFileInput($event.target.files)"></app-custom-upload>

---

它正在工作，所以什么是问题以及如何解决它

如果有什么不清楚的地方我可以根据您展示的代码和HTML解释，有人能帮我吗，它唯一可能的位置是complete=handleFileInput$event.target.files在HTML中，并且$event.target未定义错误的关键是有人试图从未定义的内容获取.files，因此，请查找发生此问题的地方的.files。感谢您的回复，我该如何解决此问题使用此替代方法时，使用第一条语句时，我该如何处理此问题，以及为什么会发生此问题，以及如何解决此问题。请参阅更新的帖子

  <app-custom-upload #cusUpload nbTooltip="upload excel file" nbTooltipPlacement="bottom"
          nbTooltipStatus="primary" (complete)="handleFileInput($event.target.files)"></app-custom-upload>