使用承诺删除后如何刷新我的列表答案

【问题标题】：How refresh my list after a delete using promise使用承诺删除后如何刷新我的列表
【发布时间】：2019-10-22 19:51:08
【问题描述】：

在我的 Angular 应用程序中，我想在删除后更新列表，但我不知道如何使用 promise

  delete(id: any) {
    this.missionService.deleteMission(id);
    // .then((res) => {
    //   this.missionsArray$[id] = null;
    //   this.missionsArray$ = this.getAllMissions();
    // }).catch((error) => {
    //   console.log('error', error);
    // });
  }

我尝试使用带注释的代码，它可以工作，但是使用相同的数据（没有删除的项目）使我的列表翻倍

我使用这个函数来构建我的列表：

  getAllMissions(): any {

    this.missionService.readAllMissions().then(response => {

      response.forEach(mission => {
        if (mission.data.missionCreator === this._auth.user.id) {
          mission.data.id = mission.ref['@ref'].id;
          this.missionsArray$.push(mission.data);
        } else {
          this.missionsArray$ = [];
        }
      });
    });
  }

还有这个删除一项的功能：

  delete(id: any) {
    this.missionService.deleteMission(id);
    // .then((res) => {
    //   this.missionsArray$[id] = null;
    //   this.missionsArray$ = this.getAllMissions();
    // }).catch((error) => {
    //   console.log('error', error);
    // });
  }

我尝试使用带注释的代码，它可以工作，但是使用相同的数据（没有删除的项目）使我的列表翻倍

你能解释一下如何使用 Promise 进行体面的刷新吗？

【问题讨论】：

在你的函数中使用强返回类型，也许还有一些 async+await
您的getAllMissions() 不返回列表，它会改变现有的列表。
删除项目时需要重新加载任务列表还是直接删除项目而不完全重新加载？
你的 getAllMissions 返回什么

标签： angular promise fetch

【解决方案1】：

在重新加载之前清空数组this.missionsArray$ = []。

delete(id: any) {
    this.missionService.deleteMission(id);
     .then((res) => {
       this.missionsArray$[id] = null;
       this.missionsArray$ = []
       this.getAllMissions();
     }).catch((error) => {
       console.log('error', error);
     });
  }

或者你可以splice现有的数组

delete(id: any) {
    this.missionService.deleteMission(id);
     .then((res) => {
      this.missionsArray$[id] = null;
      for (var i = 0; i < this.missionsArray$.length; i++) {
        if (this.missionsArray$[i].id == id) {
          this.missionsArray$.splice(i, 1)
        }
      }
    }).catch((error) => {
      console.log('error', error);
    });
  }

【讨论】：

感谢您的帮助：)

【解决方案2】：

您可以通过在删除项目后调用getAllMissions()来做非常简单的方法。

delete(id: any) {
    this.missionService.deleteMission(id);
     .then((res) => {
        this.getAllMissions() //added line
     }).catch((error) => {
       console.log('error', error);
     });
  }

【讨论】：

【解决方案3】：

在您的情况下，您将获得复制的记录，因为您在同一阵列中再次推送而不重置它。所以要么：

getAllMissions(): any {
   this.missionsArray$ = []; \\ Reset here before pushing again into same array 
    this.missionService.readAllMissions().then(response => {

      response.forEach(mission => {
        if (mission.data.missionCreator === this._auth.user.id) {
          mission.data.id = mission.ref['@ref'].id;
          this.missionsArray$.push(mission.data);
        } else {
        \\ This is not correct, since for any mission which will not have "missionCreator" matching "this._auth.user.id", 
        \\ your complete array will be flushed, if this is intended then fine
          this.missionsArray$ = []; 
        }
      });
    });
  }

或者你可以使用：

Array.prototype.filter() 方法来过滤已删除的记录，在您的删除操作之后，这也将节省您的 1 个不必要的 api 调用 - getAllMission，因为您只是删除记录这可以在客户端本身被过滤掉，并且只需在页面加载或任何其他操作时获取所有记录。

【讨论】：