I am currently using the Chrome browser and working on a project involving a table listing users. I have implemented CRUD functionalities for this table. However, when trying to delete a user, sometimes the data reloads successfully, but other times it does not reflect the changes immediately (requiring a page refresh with F5 to display the latest data).
deleteUser(user: User) {
if(user){
this.userService.deleteUser(user);
this.ngOnInit();
}
}
ngOnInit() { // Fetch all users and populate the users[] array when the component loads
this.getAllUsers();
}
getAllUsers() {
this.userService.getUsers().then(users =>
this.users = users
);
}
Service:
deleteUser(user: User): Promise<void> {
const url = `${this.userUrl}/${user.id}`;
return this.http.delete(url, { headers: this.headers })
.toPromise()
.then(() => null)
.catch(this.handleError);
}
getUsers(): Promise<User[]> {
return this.http.get(this.userUrl)
.toPromise()
.then(response => response.json().content as User[])
.catch(this.handleError)
}
HTML:
<button type="button" class="btn btn-warning" (click)="deleteUser(user)">Delete</button>
Please provide any advice or suggestions you may have. Thank you.