how to delete a row of user from table using Angular2?

Issue

This is the deleteUser function of user service which call the backend server

 deleteUser(id:number)
 {
     return this.http.delete(`${this.Url}/${id}`)
 }

and this is the userComponent which display the list of users on a grid. I want to delete user by clicking on 'supprimer'

@Component({
    template: <ul *ngFor=" let x of users">
            <li>{{x.id}}</li>
            <li>{{x.firstName}}</li>
            <li>{{x.lastname}}</li>
            <li>{{x.username}}</li>
            <li>{{x.password}}</li>
            <li><a (click)="deleteItem(x.id)">supprimer</a></li>
        </ul>
})

export class UserListComponent implements OnInit {
    private users: User[];

    constructor(private userService: UserService ,private router:Router) { }
    ngOnInit() {
        his.userService.getAllUsers().subscribe(data => {this.users = data })
    }

    deleteItem(id:number) {
        this.userService.deleteUser(id).subscribe(   );
    }

}

Solution

If you want to remove an item from "users" object, declare an index of the current object.

<ul *ngFor=" let x of users; let i = index;">
   <li><a (click)="deleteItem(x.id, i)">supprimer</a></li>
</ul>

Then you can splice from your collection using this index

  deleteItem(id:number, index:number) {
    this.userService.deleteUser(id).subscribe(response =>{
         this.users.splice(index, 1);
    });
 }

Answered By - Nicolas Law-Dune