从 Angular 中的 http 请求更新数据

Question

I've got an interface that basically lets you add, edit, or delete a user. When the component initializes it does an http request to the server to get current users. So if you go to edit or delete a user there is a dropdown of all the users received from that request. The problem is that if the I delete a user for example through http request, I need to then send another get request to update the data client side so that if you were to open the dropdown again it would reflect the changes made. I can fix this problem by running 'ngOnInit()' again after successful request but this means I'm 'subscribing' every time the user does something..

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

I'm new to Angular so I'm not entirely sure the best way to go about it but I feel like running this method of 'subscribing' every time the user performs a request is wrong. Any help would be appreciated.

Answer 1

Ideally It's best if you request the data from the server once you have performed a POST/Delete operation just to be sure that you get the latest/correct data from the server. So Yes, it is OK to get data again after delete.

I have give the code sample below of typically how you can do it. Don't forget to unsubscribe the observables and dispose of them later.

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

All you have to do is removing the deleted user from the users array locally inside your class after you get success response from the delete request. Do not use this.ngOnInit(); and of course don't subscribe again to the same api to get the new data.

Let's say that you get the id of the user you want to delete and send this id to through the delete api , you save it in a poroperty userId . Then:

1. get user index in the users array: let deletedUserIndex = this.users.findIndex(item => item.id === this.userId);

2. delete the user object from the users array: this.users.splice(deletedUserIndex, 1);

And that's it

Answer 3

Refactor out the code that requests for current users in a private method, so that you can reuse it -

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

Then you can call that private method from inside the ngOnInit() -

ngOnInit() {
    this.loadUsers();
}

and also from inside your delete method, when the deletion is done -

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