时间戳

首页 > 解决方案 > 删除项目后刷新列表

node.js - 删除项目后刷新列表

问题描述

我得到了从服务器删除文件的简单功能。

  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}`)
  }

和函数 fetch 看起来像

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>

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

标签： node.jsangular

解决方案

我建议您在删除后不要获取文件。如果您的目的是拥有一个包含用户和用户的应用程序，那么对 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

推荐阅读