从 Angular 中的 http 请求更新数据

问题描述

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

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

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

解决方法

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

我提供了下面的代码示例，说明了您通常如何做到这一点。不要忘记取消订阅 observables 并在以后处理它们。

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();，当然也不要再次订阅同一个api来获取新数据。

假设您获得了要删除的用户的 id，并通过 delete api 将此 ID 发送到，您将其保存在属性 userId 中。然后：

1. 在 users 数组中获取用户索引： let deletedUserIndex = this.users.findIndex(item => item.id === this.userId);

2. 从用户数组中删除用户对象： this.users.splice(deletedUserIndex,1);

就是这样

,

将私有方法中请求当前用户的代码重构出来，方便复用-

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

然后您可以从 ngOnInit() 内部调用该私有方法 -

ngOnInit() {
    this.loadUsers();
}

以及从您的删除方法内部，当删除完成时 -

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