Hi I am new to Angular 13 and 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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)
}

CodePudding user response：

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)
}