时间戳

首页 > 解决方案 > 从 Angular 中的 http 请求更新数据

angular - 从 Angular 中的 http 请求更新数据

问题描述

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

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

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

标签： angularangular2-observables

解决方案

理想情况下，最好在执行 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();
}

推荐阅读