这是调用后端服务器的用户服务的deleteUser
功能
deleteUser(id:number)
{
return this.http.delete(`${this.Url}/${id}`)
}
这是显示网格上用户列表的userComponent
。
我想通过点击' 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( );
}
}
答案 0 :(得分:2)
如果您要从&#34;用户&#34;中删除项目object,声明当前对象的索引。
<ul *ngFor=" let x of users; let i = index;">
<li><a (click)="deleteItem(x.id, i)">supprimer</a></li>
</ul>
然后您可以使用此索引
从您的收藏中拼接 deleteItem(id:number, index:number) {
this.userService.deleteUser(id).subscribe(response =>{
this.users.splice(index, 1);
});
}