Angular 中的 http 请求更新数据

Question

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

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

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

Answer 1

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

我在下面给出了典型的代码示例，您可以如何做到这一点。不要忘记取消订阅可观察对象并稍后处理它们。

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

Answer 2

您所要做的就是在收到删除请求的成功响应后，从 class 内本地的 users 数组中删除已删除的用户。不要使用 this.ngOnInit();，当然也不要再次订阅相同的 api 来获取新数据。

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

获取 users 数组中的用户索引： let deletedUserIndex = this.users.findIndex(item => item.id === this.userId);
从用户数组中删除用户对象： this.users.splice(deletedUserIndex, 1);

就是这样

Answer 3

在私有方法中重构请求当前用户的代码，以便您可以重用它-

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

然后您可以从 ngOnInit() -

内部调用该私有方法

ngOnInit() {
    this.loadUsers();
}

以及在删除完成后从你的 delete 方法内部 -

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

Angular 中的 http 请求更新数据

Updating data from http request in Angular

angular2-observables

angular