如何修復角度錯誤 TS2322（使用 ngFor (FileList)）

Question

我完全明白，在angular中我們總是需要注意類型，但是這個例子造成的錯誤實在是令人費解。

我有一個fileList，它的類型是FileList，當用戶還沒有選擇一個文件時，這個fileList肯定不存在。

因此，在 html 中，我使用 ngIf 來檢查 fileList 是否存在，一旦存在，ngFor 就會將其循環出來。

HTML

<ng-container *ngIf="fileList">
  <mat-list-item *ngFor="let item of fileList">
    {{ item.name }}
  </mat-list-item>
</ng-container>

TS

fileList?: FileList;
---
onFileSelected(event: Event) {
  const targrt  = event.target as HTMLInputElement;
  const files   = targrt.files as FileList;
  if ( files ) {
    this.fileList = files;
  }
}

但是，它會響應此消息。

錯誤 TS2322：類型 'FileList' 不可分配給類型 'any[] | 可迭代 | (可迭代 & 任何[]) | (任何[] & 可迭代) | 空 | 不明確的'。

請糾正我的錯誤，我該如何改進？ 感謝任何幫助。

Answer 1

您可以將其轉換為數組並在*ngFor中使用

const fileList = Array.from(yourFileList)

Answer 2

錯誤發生在您提到的行：

const files   = targrt.files as FileList;

發生這種情況是因為FileList不是數組，也不是從數組繼承，但它確實實現了可迭代協議，因此您可以使用擴展語法將其作為數組獲取，或者您可以將其轉換為數組類型以使用它為 *ng 為目的。

這種方法在這種情況下會有所幫助。 Array.from(target.files)

或者

[...target.files]

在您的情況下改進了代碼：

fileList?: any[] = [];

onFileSelected(event: Event) {
  const targrt  = event.target as HTMLInputElement;
  fileList = Array.from(targrt.files);
  // OR, you can also do this
  // fileList = [...targrt.files];
}


<ng-container *ngIf="fileList && fileList.length > 0">
  <mat-list-item *ngFor="let item of fileList">
    {{ item.name }}
  </mat-list-item>
</ng-container>

我希望它有幫助..!!