Как удалить файл в fileList с помощью nzRemoved в Angular7 - PullRequest
0 голосов
/ 04 октября 2019

У меня есть fileList из файла загрузки с использованием Nz Zorro Ant для html в Angular 7, данные будут публиковаться в базе данных с помощью 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], удаление файлаКнопка в интерфейсе не может работать.

1 Ответ

0 голосов
/ 12 ноября 2019

Вы можете изменить свой код следующим образом: *

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) => {

    }
...