找出在 Angular 專案中一個變更事件使用的 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

這個錯誤是因為你在使用帶有 strict 模式的 TypeScript 和帶有 strictTemplates 選項的 Angular。

在你的範本中，使用 -

<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。