Question

我有一个简单的功能，可以从服务器删除文件。

  deletePhoto(e) {
    if (window.confirm('Do you really need delete this file?')) {
      this.uploadService.deleteFile(e)
        .subscribe(res => {
          this.fetchFiles();
        });
    }
  }

服务看起来像

 deleteFile(filename): Observable<any> {
    return this.http.delete(`http://localhost:8080/api/files/all/${filename}`)
  }

和函数获取类似

fetchFiles() {
    this.fileUploads = this.uploadService.getOneFile(this.filename);
  }

在我的后端

exports.deleteFile = (req, res) => {
    fs.unlink((uploadFolder + '_files/') + req.params.filename, (err) => {
        if (err) {
            console.log("failed to delete local image:" + err);
        } else {
            console.log('successfully deleted local image');
        }
    });
}

删除工作正常，但是删除后我的列表没有刷新。

“列表”是简单的表格

<tr *ngFor="let file of fileUploads | async | filter: name | paginate: { itemsPerPage: 10,
                        currentPage: p }; let i = index">
                  <td id="lPart" style="cursor: pointer; font-weight: normal;">
                    <a href="http://localhost:8080/api/file/{{file}}">{{file}}</a></td>
                  <td class="text-right" id="action">
                    <button class="btn btn-sm btn-danger" (click)="deletePhoto(file)">Delete</button>
                  </td>
                </tr>

我想刷新此表而不重新加载页面。

Answer 1

我建议您删除后不要提取文件。如果您的目的是与用户和用户一起开发应用程序，则对API的任何获取都非常耗时，因此，获取较少意味着更快。

首先，为了确保您会收到API的响应，您需要按以下方式更改发送方式

exports.deleteFile = (req, res) => {
  fs.unlink((uploadFolder + '_files/') + req.params.filename, (err) => {
    if (err) {
      console.log("failed to delete local image:" + err);
      res.json({"message":"fail","code":500}) // this is an exemple, but you need to have at least res.json({})
    } else {
      console.log('successfully deleted local image');
      res.json({"message":"success","code":200}) // same here
    }
  });
}

将文件发送到后端后，只需按如下所示从列表中拼接文件

deletePhoto(e){
  if (window.confirm('Do you really need delete this file?')) {
    this.uploadService.deleteFile(e)
      .subscribe(res => {
        this.fileUploads.splice(this.fileUploads.indexOf(filename),1)
      });
  }
}

但是问题是您的fileUploads是Observable，所以这可能是可行的

fetchFiles() {
  this.uploadService.getOneFile(this.filename).subscribe((val)=>{
    this.fileUploads = val
  }
}

这样，您将在fileUploads变量中拥有列表，但是随后需要对模板进行最终更改，您需要删除管道async

删除项目后刷新列表

1 个答案: