I am trying to create a list of items and delete them one by one. I have used (click) and removeUser() to delete the single item, unfortunately the output is that no matter what button is clicked, all the 3 items are deleted at the same time. Please help. Thank you
export class UserlistComponent {
users = [
{
id : '1',
name: 'Jack',
age: '33'
},
{
id : '2',
name: 'Kim',
age: '44'
},
{
id : '3',
name: 'Mag',
age: '22'
},
]
removeUser(id:string): void{
this.users = this.users.filter(user => user.id !== user.id)
}
}<li *ngFor="let user of users">
{{user.name}} is {{user.age}} years old
<button (click)="removeUser(user.id)">Remove</button>
</li>You are using your filter on user.id for both sides of the comparison operator.
You need to compare with your method's parameter:
removeUser(id:string): void{
this.users = this.users.filter(user => user.id !== id)
}
Fix to your question
You are using the filter statement incorectly. You should use the parementer in removeUser function to filter down the list.
removeUser(id:string): void{
this.users = this.users.filter(user => user.id !== id)
}
Better Approach
You could just splice the unwanted elements with Array.splice
Template
<li *ngFor="let user of users; let i = index">
{{user.name}} is {{user.age}} years old
<button (click)="removeUser(i)">Remove</button>
</li>
Component.ts
removeUser(index): void{
this.users.splice(index, 1)
}