在javascript中从p-fileupload文件列表中清除单个文件

Question

我正在 Angular 应用程序中使用 p-fileupload，并使用 ng-template 添加了一些自定义模板。我添加的内容基本上是为每个上传的文件显示的卡片，并且该卡片的右侧有一个垃圾箱/删除图标，我希望允许用户单击以删除该特定文件。

<p-fileUpload #fileUploadControl class="upload-file" name="packShipFiles" multiple="multiple" mode="advanced" [customUpload]="true" (onClear)="clearFileList()" (onSelect)="onFileChange($event)" (uploadHandler)="handleUpload($event)">
    <ng-template let-file pTemplate="file">
        <div class="file-card">
        <div>{{file.name.substr(0, 10)}} - {{file.size}}KB</div>
        <div>
            <select name="{{file.name}}" id="{{file.name}}" (change)="onTypeSelectChange($event, file)">
               <option *ngFor="let opt of fileTypeOptions" value="{{opt.code}}">{{opt.name}}</option>
            </select></div>
            <div class="file-card-remove"><span (click)="removeFile(file)" class="material-symbols-outlined trash">delete</span></div>
        </div>
    </ng-template>
</p-fileUpload>

在我的 component.ts 中，我想处理垃圾图标的单击，以便从文件列表中删除文件。我在网上看到了几个例子，他们使用 Array.from() 或类似的东西来从输入文件列表中获取数组，然后从数组中删除文件。

我不想这样做，因为这对 p-fileupload 上实际的文件没有影响。可以从中删除文件吗？

removeFile(file) {
    //how to remove?
    this.fileUploadControl.files.remove(file); //this would be great but I don't think it works that way
}

Answer 1

我能够通过首先获取对文件上传控件的引用来解决这个问题，如下所示：

@ViewChild('fileUploadControl')
public fileUploadControl: any;

然后在删除函数中访问控件并使用文件索引调用删除函数。由于某种原因，当我尝试使用 FileUpload 类型声明 fileUploadControl 时遇到了构建错误，因此我必须将其声明为 any，然后在我真正想要调用其方法时强制转换它。

removeFile(file) {
  const control: FileUpload = this.fileUploadControl as FileUpload;
  const idx = control.files.indexOf(file);
  control.remove(null, idx); //it wants the event but it can't have it
}