Angular Delete item doesn't effect the html until reload-CodePudding

I have a table of users that I get from API, when I delete an user the table doesn't change until I reload the page

the service of users

getUsers(): Observable<any> {
    return this._HttpClient.get(`http://localhost:1234/hebaback/public/api/customers`);
}

deleteUser(id: any): Observable<any> {
    return this._HttpClient.get(`http://localhost:1234/hebaback/public/api/customers-delete-${id}`);
}

the users component

users: any;

constructor(public _UsersService: UsersService) {
    _UsersService.getUsers().subscribe((data) => {
      this.users = data;
      this.dtTrigger.next();
    }, (error) => { console.log(error) });
}

delete(id: any) {
    this._UsersService.deleteUser(id).subscribe(data => {
        console.log(data);
    });
}

CodePudding user response：

You need to remove deleted user from users array as well:

    
   delete(id: any) {
        this._UsersService.deleteUser(id).subscribe(data => {
        console.log(data);
        this.users = this.users.filter((user) => user.id !== id);
    });