弄清楚 Angular 项目中使用的更改事件是什么 Typescript 类型

Question

html

<input type="file" #Image accept="image/*" 
       (change)="handleFileInput($event.target.files)">

.ts 文件

public handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
    console.log(this.fileToUpload);
  }

我收到一个 html 错误：

类型“EventTarget”上不存在属性“文件”

Answer 1

该错误是因为您使用的是带有strict模式的 TypeScript 和带有选项的 Angular strictTemplates。

在您的模板中，使用 -

<input type="file" #Image accept="image/*" 
       (change)="handleFileInput($any($event).target.files)">

无需更改组件代码（文件.ts）。

欲了解更多详情，请参阅 -

1. 排除模板错误
2. 使用 $any() 禁用类型检查