如何使用Angular2从表中删除一行用户?

时间:2017-04-05 16:19:09

标签: angular

这是调用后端服务器的用户服务的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(   );
    }

}

1 个答案:

答案 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);
    });
 }