Angular 单击，在选定多个文件后从列表中删除文件

在我的项目中，我选择多个fileInput，然后我迭代ngFor循环以显示所选文件的名称。对于每个名称，都会有一个删除按钮，用于在上载之前从列表中删除文件。我的问题是我的以下代码我可以从列表中隐藏选定的文件名，但当单击上载时，隐藏的文件也会被上载。我无法从列表中删除所选文件

HTML组件代码

<form [formGroup] = "uploadForm" (ngSubmit)="uploadFiles()">
<div class="custom_modal pb-3">
    <div class="modal-header border-0 p-1 pl-3 pr-3 d-flex justify-content-between align-items-center">
      <h3 class="m-0">Project: {{assetDetails.name}}</h3>
      <button type="button" class="close" data-dismiss="modal" (click)="closeModal()">&times;</button>
    </div>
    <div class="modal-body p-3">
      <div class="body_top d-flex justify-content-between mb-4 mt-2 align-items-center">
        <h3 class="title m-0">Add Assets</h3>
        <button class="btn btn-primary" (click)="showAllAsset();">Show All Assets</button>
      </div>

        <div class="screen_row">
          <div class="row">
              <div class="col-md-5">
                  <label class="mb-1">File Upload</label>
                  <div class="box__input">
                    //File selection from here
                    <input type="file" name="file" id="file" class="box__file" data-multiple-caption="{count} files selected" multiple  #file (change)="onFilesAdded($event)"> 
                    <label for="file">
                      <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                      <span>Click or Drag file to Upload</span>
                    </label>
                  </div>
              </div>
              <div class="col-md-7">
                  <div class="inner_body">
                    <div class="row mb-2" formArrayName="fileArray" *ngFor="let file of files; let i = index">
                      <div class="col-md-12 d-flex align-items-center justify-content-between" #filename>
                        <label >{{file.name}}</label>
                        <button type="button" class="close" (click)="removeAsset(filename,i);">&times;</button>
                      </div>
                       <div class="col-md-12 pl-0 pl-sm-3">
                      </div>
                     <mat-progress-bar *ngIf="progress" mode="determinate" [value]="progress[file.name].progress | async"></mat-progress-bar>
                  </div>
              </div>
          </div>
        </div>
   </div>
    <div class="modal-footer border-0">
        <button type="submit" class="btn-primary" data-dismiss="modal">Apply</button>
        <button type="button" class="btn-primary cancle" data-dismiss="modal" (click)="closeModal()">Cancel</button>
    </div>
  </div>
</form>

项目：{{assetDetails.name}
&时代；
增加资产
显示所有资产
文件上传
//从这里选择文件
单击或拖动文件以上载
{{file.name}
&时代；
申请
取消

Component.ts文件

export class AssetmodalComponent implements OnInit {
  @Input() assetDetails;

  @ViewChild('file', { read: false, static: false }) file;
  myInputVariable: ElementRef;
  progress;
  canBeClosed = true;
  primaryButtonText = 'Upload';
  modelReference: any;
  fileToUpload: any;
  progressvalue: any;
  showCancelButton = true;
  uploading = false;
  uploadSuccessful = false;
  uploadForm: FormGroup;
  fileput: any;
  arrayItems: {
    file: any
  }[];
  filesarray: any = [];
  public files: Set<File> = new Set();


  constructor(
    private activeModal: NgbActiveModal,
    private uploadService: FileuploadService,
    private formBuilder: FormBuilder,
    private modelService: NgbModal,
    private pageService: PagesService,
    private formbuilder: FormBuilder,
    private spinner: SpinnerVisibilityService,
    private messageservice: LoaderService,
    private utiService: UtilService,
  ) {

   }

  ngOnInit() {
    this.uploadForm = this.formBuilder.group({
      fileArray: this.formbuilder.array([])
     });
    this.arrayItems = [];
  }

  closeModal() {
    this.activeModal.close();
  }

  //onfile selected function
  onFilesAdded($event) {
    console.log('file', this.file);
    this.fileput = this.file;
    const files: { [key: string]: File  } = this.file.nativeElement.files;
    console.log(files);

   //getting files name from this loop
    for (const key in files) {
      if (!isNaN( parseInt(key, 0) )) {
        this.files.add(files[key]);
      }
     }

  }


  showAllAsset() {
  this.modelReference = this.modelService.open(ShowallassetmodalComponent,{ windowClass: 'modal_width' }) ;
}

   //on click delete button function 
  removeAsset(files,i) {
    console.log('files array', files);
    console.log('ith value', i);
    files.innerHTML = "";
}

  uploadFiles() {
    // set the component state to "uploading"
    this.messageservice.setHttpLoaderStatus(false);
    this.uploading = true;
    // start the upload and save the progress map
    this.progress = this.uploadService.upload(this.files);
    console.log('fdd0', this.progress);

    // tslint:disable-next-line: forin
    for (const key in this.progress) {
    this.progress[key].progress.subscribe(val => {

      console.log(val);
      this.progressvalue = val;
    });
    }

     // convert the progress map into an array
    const allProgressObservables = [];
     // tslint:disable-next-line: forin
    for (const key in this.progress) {
           allProgressObservables.push(this.progress[key].progress);
         }

         // Adjust the state variabless

         // The OK-button should have the text "Finish" now
    this.primaryButtonText = 'Finish';

         // The dialog should not be closed while uploading
    this.canBeClosed = false;


         // Hide the cancel-button
    this.showCancelButton = false;

         // When all progress-observables are completed...
    forkJoin(allProgressObservables).subscribe(end => {
           // ... the dialog can be closed again...
           this.canBeClosed = true;
           // ... the upload was successful...
           this.uploadSuccessful = true;
           // ... and the component is no longer uploading
           this.uploading = false;
           this.messageservice.setHttpLoaderStatus(true);
           this.activeModal.close();

         });

  }

}

导出类AssetmodalComponent实现OnInit{
@Input（）资产详情；
@ViewChild（'file'，{read:false，static:false}）文件；
myInputVariable:ElementRef；
进步
canBeClosed=true；
primaryButtonText='上载'；
模型参考：任何；
fileToUpload：任何；
价值：任何；
showCancelButton=true；
上传=假；
uploadSuccessful=false；
上传形式：FormGroup；
档案输出：任何；
阵列项目：{
档案：有吗
}[];
filesarray:any=[]；
公共文件：Set=new Set（）；
建造师(
私有activeModal:NgbActiveModal，
私有上传服务：FileuploadService，
私有formBuilder:formBuilder，
专用模型服务：NgbModal，
专用页面服务：页面服务，
私有formbuilder:formbuilder，
私人微调器：SpinnerVisibilityService，
私有消息服务：LoaderService，
专用utiService:UtilService，
) {
}
恩戈尼尼特（）{
this.uploadForm=this.formBuilder.group({
fileArray:this.formbuilder.array（[]）
});
this.arrayItems=[]；
}
closeModal（）{
this.activeModal.close（）；
}
//onfile所选函数
onFilesAdded（$event）{
console.log（'file'，this.file）；
this.fileput=this.file；
常量文件：{[key:string]：File}=this.File.nativeElement.files；
console.log（文件）；
//正在从此循环获取文件名
for（常量输入文件）{
如果（！isNaN（parseInt（键，0）））{
this.files.add（files[key]）；
}
}
}
showAllAsset（）{
this.modelReference=this.modelService.open（ShowallassetmodalComponent，{windowClass:'modal_width'}）；
}
//点击删除按钮功能
移除集合（文件，i）{
log（'files数组'，files）；
console.log（'ith value'，i）；
files.innerHTML=“”；
}
上传文件（）{
//将组件状态设置为“上载”
this.messageservice.setHttpLoaderStatus（false）；
this.upload=true；
//开始上传并保存进度图
this.progress=this.uploadService.upload（this.files）；
console.log（'fdd0'，this.progress）；
//tslint:禁用下一行：forin
for（此进程中的const键）{
this.progress[key]。进度。订阅（val=>{
控制台日志（val）；
this.progressvalue=val；
});
}
//将进度图转换为数组
常量allProgressObservables=[]；
//tslint:禁用下一行：forin
for（此进程中的const键）{
allProgressObservables.push（this.progress[key].progress）；
}
//调整状态变量
//OK按钮现在应该有文本“Finish”
this.primarybuttonext='Finish'；
//上载时不应关闭该对话框
this.canBeClosed=false；
//隐藏取消按钮
this.showCancelButton=false；
//当所有可观察到的进度完成时。。。
forkJoin（allProgressObservables）.订阅（end=>{
//…可以再次关闭该对话框。。。
this.canBeClosed=true；
//…上载成功。。。
this.uploadSuccessful=true；
//…并且该组件不再上载
this.upload=false；
this.messageservice.setHttpLoaderStatus（true）；
this.activeModal.close（）；
});
}
}

---

这是我的代码。我想在单击第I个位置时从列表中删除文件。请帮助我。谢谢：）

更改您的

移除方法，如下所示

removeAsset（文件：file）{
此.files.delete（文件）；
}

然后在模板中，按如下方式使用它


{{file.name}
&时代；
非常感谢。我只是在代码中遗漏了这一行。这很好：）@IshanBhatt您能再次选择删除的文件吗？@Prashantpimple它将完全从文件列表中删除，要再次选择，我需要再次单击“文件输入”