Лучший способ обновить пользовательский интерфейс, когда пользователь удаляет элемент в базе данных в Angular

Question

Хотелось бы узнать лучший способ обновления пользовательского интерфейса, когда пользователь удаляет элемент в базе данных.У меня есть следующий сценарий: в пользовательском интерфейсе у меня есть адреса, которые привязаны к массиву в компоненте, этот массив назначается на основе данных в базе данных.Когда пользователь нажимает кнопку «удалить», я выполняю http-запрос на удаление элемента в базе данных, но, конечно, пользовательский интерфейс не обновляется. Было бы легко, если бы я мог использовать router.navigate (), чтобыКомпонент обновляет себя.Но когда я перемещаюсь по тому же маршруту, angular не перезагружает / обновляет компонент.Единственное решение, о котором я могу подумать, это написать некоторый машинописный код для удаления элемента из массива.

Моя модель:

 export class Address {

  public id: number; //unique id I can use to remove the item
 ...
  }

соответствующий код моего компонента.

addresses: Array<Address>;

....

 removeAddress(id: number) : void {

//service used to make http requests, I pass the id to delete
this.addressService.removeAddress(id).subscribe((res) => {

     //How can I update the UI on Success?

},    (err: HttpErrorResponse) => {
  console.log(err);
});

Answer 1

Просто удалите элемент из массива, если ответ приходит без ошибок (HTTP 200).Это сэкономит трафик для пользователя.Но вы также можете перезагрузить оставшиеся предметы из базы данных.

delete myArray[key];



const index = myArray.indexOf(key, 0);
if (index > -1) {
   myArray.splice(index, 1);
}