Angular - 文件輸入字段上的更改檢測僅工作一次

Question

問題是我有一個文件輸入字段，一次只需要一個文件，我需要它是這樣的。

如果我嘗試上傳一個文件，則一切正常。 但是，如果我需要上傳更多文件，除非我重新加載頁面，否則似乎不會調用“更改”處理程序方法，這不是任何人想要的。

HTML 如下所示：

<div class="col-xs-7">
    <button
      class="btn btn-primary"
      [disabled]="isLoadingModal"
      (click)="activityFileInput.click()">
    archivo</button> {{ newActivity.fileName }}
    <input
      type="file"
      id="activity-file-input"
      [disabled]="isLoadingModal"
      (change)="selectFile(activityFileInput.files[0])"
      #activityFileInput
      hidden>
  </div>

組件中的功能是：

selectFile(file: File): void {
    console.log('Hello');

    if(file == undefined)
      return;

    this.newActivity.fileName = file.name;
    this.newActivity.file = file;
}

在第一個文件上傳時顯示“Hello”，沒問題。 但是該方法似乎不會被多次調用。 如何解決這個問題？

Answer 1

在onclick事件中將輸入的值設置為null ...

<input
  type="file"
  id="activity-file-input"
  onclick="this.value = null"
  [disabled]="isLoadingModal"
  (change)="selectFile(activityFileInput.files[0])"
  #activityFileInput
  hidden>

Answer 2

只有當您嘗試上傳相同的文件/圖像時才會發生這種情況。 當(change)看到相同的事件時，它不會觸發給定的方法。 要修復它， (click)="$event.taget.value=null"在輸入標簽中添加(click)="$event.taget.value=null"