spring-boot - 如何在Angular7中使用nzRemoved删除fileList中的文件

Question

我在Angular 7中有一个使用Nz Zorro Ant for html上传文件的fileList，数据将使用Spring Boot API发布到数据库，我想使用[nzRemoved]删除fileList中的文件。如何使用它？

这是我的.ts，

    checkUpload(event) {
    // console.log(event);
    // this.payload = JSON.stringify(event.file.response);
    if (event.type === 'success'){
    // (<Array<any>>this.fileList).pop();
    this.fileList.push({
        uid   : event.file.uid,
        name  : event.file.name,
        status: event.file.status,
        url   : event.file.response.data[0].path_url
    });
    // this.payload = JSON.stringify(this.fileList);
    this.project.doc_url = JSON.stringify(this.fileList);
    this.projectOverviewService.postDocument(this.project_id, 
    this.fileList).subscribe( res => {
      console.log('success');
        });
     }
   }

  handleRemove(){
     for (let i = 0; i <= this.fileList.length; i++) {
     this.fileList.splice(0 , i) 
     }
  }

这是我的html，

  <div nz-col nzSpan="6" >
  <nz-upload 
  nzAction="/upload/documents" 
  [(nzFileList)]="fileList" 
  (nzChange)="checkUpload($event)" 
  [nzRemove]="handleRemove">
    <button nz-button type="button"><i nz-icon nzType="upload"></i> 
      <span>Upload dokumen Overview</span></button>
  </nz-upload>
  </div>

当我添加 [nzRemoved] 时，UI 中的删除文件按钮不起作用。

标签： spring-bootfile-uploadangular7ng-zorro-antd

Answer 1

您可以像这样更改代码::

HTML

    <div nz-col nzSpan="6" >
      <nz-upload 
      nzAction="/upload/documents" 
      [(nzFileList)]="fileList" 
      (nzChange)="checkUpload($event)" 
      [nzRemove]="handleRemove">
        <button nz-button type="button"><i nz-icon nzType="upload"></i> 
          <span>Upload dokumen Overview</span></button>
      </nz-upload>
      </div>

JS

    handleRemove= (file: any) => new Observable<boolean>((obs) => {

    }