Angular中点击删除按钮无法重置input type file值如何解决

问题原因 #

你之前添加的(click)="this.value = null"不生效是因为这里的this指向的是Angular组件实例，而非目标文件输入框元素，且删除操作触发时你没有精准获取到对应索引的文件输入框实例进行重置。

解决方法 #

方案1：使用Angular模板引用（推荐，符合Angular开发规范） #

1. 调整模板代码，给循环内的文件输入框添加模板引用变量#fileInput

<label [for]="'file' + i" style="width: 100%;cursor: pointer;text-align: center;">
  <div id="drop_zone" (drop)="dropPayLoad($event, i, fileType.CONFIG_FILE)" (dragover)="allowPayloadDrop($event, i, fileType.CONFIG_FILE)">
    <span class="pat-span">{{fileLableArr[i]['config_name']}}</span>
    <!-- 新增#fileInput模板引用 -->
    <input type="file" hidden [id]="'file' + i" #fileInput
      (change)="handleUploads($event.target.files, fileType.CONFIG_FILE, i)">
    <span *ngIf="fileLableArr[i]['isConfig']" style="position: relative;top: 6px;left: 5px;font-size: 31px;"
        (click)="$event.preventDefault();deleteUploadedFile($event, fileType.CONFIG_FILE, i)">&times;</span>
  </div>
</label>

2. 在组件类中引入装饰器，获取所有文件输入框实例

import { ViewChildren, QueryList, ElementRef } from '@angular/core';

// 组件类内定义属性
@ViewChildren('fileInput') fileInputs: QueryList<ElementRef<HTMLInputElement>>;

3. 在deleteUploadedFile删除方法的业务逻辑末尾，添加重置对应输入框的代码：

deleteUploadedFile(event: Event, fileType: any, i: number) {
  // 你原有的删除业务逻辑，比如修改fileLableArr状态、清空已上传文件缓存等
  // ...

  // 新增重置文件输入框逻辑
  const inputList = this.fileInputs.toArray();
  if (inputList[i]) {
    inputList[i].nativeElement.value = '';
  }
}

方案2：直接通过ID获取DOM（应急可用，不符合Angular最佳实践） #

无需修改模板，直接在deleteUploadedFile方法末尾添加如下代码即可：

const targetInput = document.getElementById('file' + i) as HTMLInputElement;
if (targetInput) {
  targetInput.value = '';
}

内容的提问来源于stack exchange，提问作者subhra_user