मुझे सरल कार्य मिला जो सर्वर से फ़ाइल को हटा रहा है।

  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>

मैं पृष्ठ को पुनः लोड किए बिना इस तालिका को रीफ्रेश करना चाहता हूं।

0
MarkeZ 2 सितंबर 2020, 14:46

1 उत्तर

सबसे बढ़िया उत्तर

मेरा सुझाव है कि आप डिलीट करने के बाद अपनी फाइलें न लाएं। यदि आपका उद्देश्य उपयोगकर्ताओं और उपयोगकर्ताओं के साथ एक एप्लिकेशन रखना है, तो एपीआई के लिए कोई भी लाने में समय लगता है, इसलिए कम मतलब तेजी से प्राप्त करना।

सबसे पहले, यह सुनिश्चित करने के लिए कि आपको अपने एपीआई से प्रतिक्रिया मिलेगी, आपको अपनी भेजने की विधि को नीचे के रूप में बदलना होगा

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
Alexis 2 सितंबर 2020, 13:11