Angular — обновить/получить данные после удаления

Примечание. Из-за чувства ответственности я добавил обновленную информацию под постом, чтобы дать немного «лучшее» представление.

TL;DR: Прочтите о подписках и субъектах, а также о том, как установить связь между компонентом и службой. Вы можете добиться того, чего хотите, либо отправив запрос GET после успешного запроса DELETE, либо обновив свой пользовательский интерфейс, локально удалив элемент из списка после успешного запроса DELETE.

Более длинная версия:

Идея может звучать следующим образом:

Если вы вносите изменения, которые хотите увидеть позже (например, 99,9% приложений), вам нужно будет сделать внутренний вызов.

То, как вы обновляете свой пользовательский интерфейс, зависит от того, как вы хотите его продолжить, после того, как вы сделали внутренний вызов.

Итак, рассмотрим случай, когда вы удаляете элемент из списка. Вы отправляете запрос на удаление этого конкретного элемента и получаете ответ от серверной части. Этот ответ должен сообщить вам, была ли выполненная вами операция удаления успешной или нет.

На основании этой информации вы можете

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

2) сделайте еще один GET-запрос к серверной части и отобразите обновленный результат после успешного удаления (безопаснее, но в итоге вы делаете 2 запроса для каждой операции).

Как вы могли бы подойти к вопросу «успешно ли удаление» зависит от вашей реализации, но я поделюсь одним из них ниже.

Для этого вам было бы полезно прочитать о Подписки и Предметы с использованием rxjs. Я буду писать, следуя второму варианту, о котором я упоминал выше.

В службе, в которую вы звоните, вы можете создать тему. Вы будете использовать эту тему для уведомления слушателей (т. е. тех, кто подписался на это событие) о любых обновлениях с помощью метода следующий.

В вашем сервисе вы можете создать новую тему следующим образом:

private _deleteOperationSuccessfulEvent$: Subject<boolean> = new Subject();

и создайте для него геттер следующим образом:

get deleteOperationSuccessfulEvent$(): Observable<boolean> {
    return this._deleteOperationSuccessfulEvent$.asObservable();
} 

Когда вы получаете ответ на свой HTTP-запрос DELETE, в зависимости от успеха или неудачи, вы можете выдать значение true или false следующим образом:

this._deleteOperationSuccessfulEvent$.next(true);

Пока что мы выдаем информацию о том, прошла ли операция удаления успешно или нет.

Но его пока никто не слушает. Итак, в вашем компонент вы можете создать подписку:

deleteOperationSuccessfulSubscription: Subscription;

и в вашем методе ngOnInit вы можете подписываться для deleteOperationSuccessfulEvent$, созданного в вашей службе:

this.deleteOperationSuccessfulSubscription = this.yourService.deleteOperationSuccessfulEvent$.subscribe(...stuff will come here...);

(обратите внимание, что мы использовали значение deleteOperationSuccessfulEvent$, а не приватное _deleteOperationSuccessfulEvent$.)

Теперь ваш компонент прослушивает событие удаления вашей службы. Нам просто нужно действовать.

this.deleteOperationSuccessfulSubscription = this.yourService.deleteOperationSuccessfulEvent$
    .subscribe(isSuccessful => {
        if (isSuccessful === true) { 
            make a GET request and display the returning data, following similar steps to which we followed so far 
        } else {
            delete operation was NOT successful, you can display an error or retry etc.
        }
    });

Дайте знать, если у вас появятся вопросы.

Обновлять: Делая все это, следует отметить некоторые вещи с точки зрения Angular и rxjs:

1. Старайтесь не использовать .subscribe() в машинописном коде — вместо этого попробуйте использовать оператор .pipe() для обработки вашей логики. Вместо этого позвольте Angular обрабатывать вашу подписку, используя async pipe в вашем шаблоне. Вы можете добавить .catchError(err => ...) в свой .pipe(), чтобы убедиться, что вы ловите свои ошибки и правильно их обрабатываете.

2- Если вам действительно нужно использовать .subscribe(), не забудьте отписаться от этой подписки в ngOnDestroy() {...}. В противном случае вы рискуете получить утечку памяти в своем приложении.

ngOnDestroy() {
  this.mySubscription.unsubscribe();
} 

Обновлено: я думаю, что вы закрываете модальное окно до того, как запрос будет выполнен. Также предполагается, что вы хотите получить список в своем родитель, а не в модальном. Итак, сначала я бы удалил, скрыл модальное окно, прослушал модальное закрытие в родительском элементе и снова извлек список... так что-то вроде:

this.myService.deleteAAT(this.satNumber).subscribe(() => this.modalRef.hide());

Затем в своем родителе послушайте скрытие:

this.modalService.onHide.pipe(
  switchMap(() => this.myService.getAATList())
).subscribe(data => {this.AATList = data})

ОРИГИНАЛ:

Когда вы делаете это:

this.myService.deleteAAT(this.satNumber).subscribe();
this.getAatEntries();

getAatEntries() на самом деле запускается до завершения удаления (скорее всего), поэтому вам нужно связать эти запросы в цепочку, вы можете добиться этого с помощью switchMap:

this.myService.deleteAAT(this.satNumber).pipe(
  switchMap(() => this.myService.getAATList())
)
.subscribe((data: ISmt[]) => this.AATList = data);

Вы можете использовать событие onHidden для модели (которое срабатывает, когда модальное окно перестало быть скрытым от пользователя), чтобы загрузить ваши данные, как показано ниже.

constructor(private modalService: BsModalService) {
    this.modalService.onHidden.subscribe(() => {
         // Fired when the modal has finished being hidden from the user
        this.getAATtEntries();
    });
}

confirmDelete(): void{
    this.myService.deleteAAT(this.satNumber).subscribe(() => { this.modalRef.hide(); });
}