Angular 正在从http请求中更新数据

我有一个界面，基本上可以让你添加、编辑或删除用户。当组件初始化时，它向服务器发出http请求以获取当前用户。因此，如果您要编辑或删除某个用户，则会显示从该请求接收到的所有用户的下拉列表。问题是，如果我删除了一个用户（例如通过http请求），那么我需要发送另一个get请求来更新数据客户端，这样，如果要再次打开下拉列表，它将反映所做的更改。我可以通过在请求成功后再次运行“ngOnInit（）”来解决此问题，但这意味着每次用户做某事时我都在“订阅”

ngOnInit() {
   this.service.getUsers()
   .subscribe(payload => {
      payload.forEach(user => {
         this.users.push(user);
      });
   });
} 

---

我是Angular的新手，所以我不完全确定最好的方法，但我觉得每次用户执行请求时都要运行这种“订阅”方法是错误的。任何帮助都将不胜感激。

理想情况下，您最好在执行POST/Delete操作后从服务器请求数据，以确保从服务器获得最新/正确的数据。所以是的，删除后再次获取数据是可以的

我在下面给出了典型的代码示例，说明了如何实现这一点。别忘了退订观测数据，以后再处理它们

private subscriptions = new Subscription();

ngOnInit() {
  this.refreshList()
}

deleteUser(id: string) {
        this.subscriptions.add(
            this.service.deleteUser(id).subscribe(
                success => {
                    this.notificationService.showNotification(`User deleted: ${success.name}`);
                    this.refreshList();
                },
                errors => this.notificationService.showErrors('Error deleting User', errors)
            )
        );
    }

refreshList() {
this.subscriptions.add(
 this.service.getUsers()
   .subscribe(payload => {
        this.users = payload;         
   }));
}

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

---

在从删除请求获得成功响应后，您所要做的就是从类中本地的

users

数组中删除已删除的用户。不要使用

this.ngOnInit（）
假设您获得要删除的用户的
id
，并通过
delete-api
将该id发送给该用户，您将其保存在一个属性
userId
中。然后：

在
用户
数组中获取用户索引：
让deletedUserIndex=this.users.findIndex（item=>item.id==this.userId）


从用户数组中删除用户对象：
this.users.splice（deletedUserIndex，1）


就是这样，
重构出在私有方法中为当前用户请求的代码，以便可以重用它-

private loadUsers(): void {
    this.service.getUsers()
        .subscribe(payload => {
            payload.forEach(user => {
                this.users.push(user);
            });
        });
}

然后可以从
ngOnInit（）内部调用该私有方法-

当删除完成时，也可以从delete方法内部删除-

deleteUser(id: number): void {
    this.service.deleteUsers(id)
        .subscribe(p => {
            console.log('User deleted Successfully!');
            this.loadUsers();    // reusing loadUsers()
        });
}

deleteUser(id: number): void {
    this.service.deleteUsers(id)
        .subscribe(p => {
            console.log('User deleted Successfully!');
            this.loadUsers();    // reusing loadUsers()
        });
}