Angular中p-fileUpload移除文件后如何获取剩余文件列表？

问题核心在于onRemove事件的回调参数中没有提供当前剩余文件集合，但PrimeNG的p-fileUpload组件本身暴露了files属性，实时存储着所有未被移除的选中文件，我们可以通过两种方式获取并处理剩余文件：

方法1：通过模板引用变量直接获取剩余文件 #

修改HTML中的p-fileUpload组件，利用模板引用#fileUpload直接访问组件的files属性，在onRemove事件中传递剩余文件：

<p-fileUpload #fileUpload styleClass="col-12" chooseStyleClass="col-3" chooseLabel="Choose File(s)..."
              (onSelect)="form.get('files').setValue($event.currentFiles); form.markAsDirty(); onFilesSelectedToUpload($event.currentFiles)"
              (onRemove)="handleFileRemove(fileUpload.files)"
              [multiple]="true">
</p-fileUpload>

在TS文件中实现处理函数，同步更新表单控件并执行剩余文件逻辑：

handleFileRemove(remainingFiles: any[]) {
  // 更新表单控件值并标记为脏值
  this.form.get('files')?.setValue(remainingFiles);
  this.form.markAsDirty();
  
  // 执行移除后的自定义逻辑
  this.onRemoveFile(remainingFiles);
}

onRemoveFile(files: any[]) {
  // 剩余文件处理逻辑
  files.forEach(file => {
    // ...你的业务代码
  });
}

方法2：双向绑定组件files属性到类变量 #

将组件的files属性双向绑定到组件类的变量，实时同步当前文件列表，无需依赖事件参数：

在TS类中定义变量：

currentFiles: any[] = [];

修改HTML：

<p-fileUpload #fileUpload styleClass="col-12" chooseStyleClass="col-3" chooseLabel="Choose File(s)..."
              [(files)]="currentFiles"
              (onSelect)="form.get('files').setValue(currentFiles); form.markAsDirty(); onFilesSelectedToUpload(currentFiles)"
              (onRemove)="form.get('files').setValue(currentFiles); form.markAsDirty(); onRemoveFile(currentFiles)"
              [multiple]="true">
</p-fileUpload>

这种方式下，currentFiles会自动同步添加/移除后的文件列表，直接用于表单更新和逻辑处理即可。

补充说明 #

• p-fileUpload的files属性是实时更新的，任何文件操作后都会同步最新集合
• 若表单控件有必填校验，当剩余文件为空时会自动触发校验，符合常规业务逻辑

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