弄清楚在 Angular 项目中 change 事件使用的 Typescript 类型

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 错误：

属性 'files' 在类型 'EventTarget' 上不存在

答案＃1

这个错误是因为你在使用 TypeScript 的 strict 模式和 Angular 的 strictTemplates 选项。

在你的模板中，使用 -

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

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

详情请参见 -

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

答案＃2

在方法中类型是 Event，当你显式地将目标类型转换为 HTMLInputElement 时，你就可以访问文件了。像这样：

const inputRef = event.target as HTMLInputElement;
const files = inputRef.files;

在模板中，只传入 $event。