Как обновить мой список после удаления с помощью обещания

Question

В моем приложении Angular я хочу обновить список после удаления, но я не знаю, как с обещанием

  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);
    // });
  }

Я пытался с закомментированным кодом, он работает, но это удваивает мой список с теми же данными (без удаленного элемента)

Можете ли вы объяснить мне, как получить приличное обновление, используя обещание, пожалуйста?

Answer 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);
    });
  }

Answer 2

В вашем случае вы получаете реплицированные записи, так как вы снова загружаете этот же массив, не сбрасывая его. Так что либо:

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$ = []; 
        }
      });
    });
  }

Или Вы можете использовать:

Метод массива .prototype .filter () для фильтрации удаленных записей после операции удаления, , который также сохранит ваш 1 ненужный вызов API - getAllMission , поскольку вы просто удаляете запись, которая могут быть отфильтрованы на стороне клиента и просто извлекать все записи при загрузке страницы или с помощью любых других операций.

Answer 3

Вы можете сделать очень простой способ, вызвав getAllMissions() после удаления элемента.

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