当用户在 Angular 中删除数据库中的项目时更新 UI 的最佳方法

Question

我想知道当用户删除数据库中的项目时更新用户界面的最佳方式。我有以下场景：在用户界面中，我有地址绑定到组件中的一个数组，这个数组是根据数据库上的数据分配的。当用户单击“删除”按钮时，我执行 http 请求以删除数据库中的项目，但是当然，用户界面不会更新。如果我可以使用 router.navigate() 会很容易，这样组件刷新自身。但是当我导航到相同的路线时，角度不会重新加载/刷新组件。我能想到的唯一解决方案是编写一些打字稿代码来从数组中删除项目。

我的模特：

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