如何调用删除方法运行索引的所有实例

Question

我有一种方法可以从我的 ionic 4 应用程序中删除文件。我可以运行删除单个文件的 deleteFile() 方法。我正在尝试使用 forEach 方法运行通过删除所有文件。但是第一次删除后就失败了。

html

<ion-card *ngFor="let data of list let i = index">
  <ion-card-content>
    <div >
      <div *ngFor="let n of loop let n = index">
        <div class = "linkButtons">
          <ion-button fill="outline" color="blackgreen" (click)=" DeleteAllFiles( )">delete all Photos</ion-button>> 
        </div>
      </div>
    </div> 

    <div>
      <ion-list>
        <ion-item *ngFor="let doc of documents; index as pos" class="ion-text-wrap">
          <ion-icon name="document" slot="start"></ion-icon>
          <ion-textarea auto-grow="true" ><small>{{ doc.name }}</small></ion-textarea>
          <ion-button slot="end" fill="clear" (click)="deleteFile(doc, pos)">
            <ion-icon slot="icon-only" name="trash"></ion-icon>
          </ion-button>
        </ion-item>
      </ion-list>
    </div>
  </ion-card-content>
</ion-card>

(click)="deleteFile(doc, pos) 工作正常。

第一次删除后 (click)=" DeleteAllFiles( ) 失败。

ts

DeleteAllFiles( ): void {
  this.documents.forEach(
    (imgEntry, position ) => this.deleteFile(imgEntry, position ));
}

deleteFile(imgEntry, position) {
  this.documents.splice(position, 1);
  this.storage.get('app_DOCS').then(documents => {
    let arr = JSON.parse(documents);
    console.log("arr ", arr );

    let filtered = arr.filter(name => name != imgEntry.name);
    console.log("filtered", filtered);

    this.storage.set('app_DOCS', JSON.stringify(filtered));
    let correctPath = imgEntry.filePath.substr(0, imgEntry.filePath.lastIndexOf('/') + 1);
    console.log("correctPath", correctPath);

    this.file.removeFile(correctPath, imgEntry.name).then(res => {
      this.presentToast('File removed.'); // edit later for one toast pop up
      }); 
  }); 
}

console.logs

文档列表

Documents [
 {
   "name":"UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_icon-144x144.png",
   "path":"ionic://localhost/_app_file_/var/mobile/Containers/Data/Application/F8772763-A219-407D-92CD-EF5178F0EA9C/Library/NoCloud/UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_icon-144x144.png",
   "filePath":"file:///var/mobile/Containers/Data/Application/F8772763-A219-407D-92CD-EF5178F0EA9C/Library/NoCloud/UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_icon-144x144.png"
 },
 {
   "name":"UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_44198511-How-to-Fix-FAL-Rifle-Brass-Strikes.pdf",
   "path":"ionic://localhost/_app_file_/var/mobile/Containers/Data/Application/F8772763-A219-407D-92CD-EF5178F0EA9C/Library/NoCloud/UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_44198511-How-to-Fix-FAL-Rifle-Brass-Strikes.pdf",
   "filePath":"file:///var/mobile/Containers/Data/Application/F8772763-A219-407D-92CD-EF5178F0EA9C/Library/NoCloud/UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_44198511-How-to-Fix-FAL-Rifle-Brass-Strikes.pdf"
 }
]


arr  
  UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_icon-144x144.png,
  UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_44198511-How-to-Fix-FAL-Rifle-Brass-Strikes.pdf

  filtered UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_44198511-How-to-Fix-FAL-Rifle-Brass-Strikes.pdf

  correctPath file:///var/mobile/Containers/Data/Application/F8772763-A219-407D-92CD-EF5178F0EA9C/Library/NoCloud/

arr  
 UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_icon-144x144.png,UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_44198511-How-to-Fix-FAL-Rifle-Brass-Strikes.pdf

 filtered UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_icon-144x144.png

 correctPath file:///var/mobile/Containers/Data/Application/F8772763-A219-407D-92CD-EF5178F0EA9C/Library/NoCloud/

 imgEntry.name UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_icon-144x144.png
 imgEntry.name UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_44198511-How-to-Fix-FAL-Rifle-Brass-Strikes.pdf

工作代码

deleteFile(imgEntry, position): Promise<any> {
  console.log("deleteFile selected");
  let request = this.storage.get(this.STORAGE_KEY_DOC);
  console.log("position", position);
  request.then(documents => {
    let arr = JSON.parse(documents);

    this.documents.splice(position);
  // let filtered = arr.filter(name => name != imgEntry.name);

    let correctPath = imgEntry.filePath.substr(0, imgEntry.filePath.lastIndexOf('/') + 1);

    this.file.removeFile(correctPath,  imgEntry.name).then(res => {
      let resp = JSON.stringify(res);
      console.log("resp", resp);
    });

    let removeDB = this.storage.set(this.STORAGE_KEY_DOC, JSON.stringify(this.documents));
  }).then(( )=> {
  });
  return request;
}

Answer 1

它是 "failing" 因为你在迭代它的同时改变了 documents 数组。

这基本上就是您所拥有的：

var arr = [1, 2, 3, 4];
arr.forEach((v, i) => {
  arr.splice(i, 1);
})
console.log(arr);

归结为：

var arr = [1, 2, 3, 4];
arr.splice(0, 1);
arr.splice(1, 1);
arr.splice(2, 1);
arr.splice(3, 1);
console.log(arr);

If greater than the length of the array, start will be set to the length of the array. In this case, no element will be deleted but the method will behave as an adding function, adding as many element as item[n*] provided.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

总而言之，边走边拼接数组是没有意义的。让您的 .then 实施跟踪成功删除的文件，然后在 .forEach 完成后拼接这些文件。您可能想要 return 来自您的 deleteFile 方法的承诺，以便您可以 Promise.all() 它在最后。

下面的示例 return 是 deleteFile 方法的承诺。 deleteAll 方法现在映射而不是 forEach，这样我们就可以存储所有的 priomises，然后一旦完成，我们就可以擦除文档数组。请注意，我在没有编译器的情况下更新了以下内容，因此可能存在一些语法错误。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

DeleteAllFiles( ): void {
  var deleteRequests = this.documents.map((imgEntry, position ) => this.deleteFile(imgEntry, position ));

  Promise.all(deleteRequests).then(() => {
      this.documents = new Arrray();
  });
}

deleteFile(imgEntry, position): Promise<any> {
  var request = this.storage.get('app_DOCS');

  request.then(documents => {
    let arr = JSON.parse(documents);
    console.log("arr ", arr );

    let filtered = arr.filter(name => name != imgEntry.name);
    console.log("filtered", filtered);

    this.storage.set('app_DOCS', JSON.stringify(filtered));
    let correctPath = imgEntry.filePath.substr(0, imgEntry.filePath.lastIndexOf('/') + 1);
    console.log("correctPath", correctPath);

    this.file.removeFile(correctPath, imgEntry.name).then(res => {
      this.presentToast('File removed.'); // edit later for one toast pop up
      }); 
  }); 

  return request;
}

如何调用删除方法运行索引的所有实例

How do call a delete method to run all instances of an index

typescript

ionic4

如何调用删除方法 运行 索引的所有实例

How do call a delete method to run all instances of an index

typescript

ionic4

如何调用删除方法运行索引的所有实例