Removing specific item in cart angular 10

Question

What am I missing here? I just want to delete the specific item but it's deleting the last item on my list if I have more than 1 item.

This is what I have on my service:

//cartService.ts

 removeItem(index){
      this.items.splice(this.items.indexOf(index), 1); //this is the problem
  }

This is my component:

 //cartComponent.ts

removeItem(index) {
     this.cartService.removeItem(index);
}

And my html:

// cart.html 

<div  class="col-12 " *ngFor="let addedItem of items; let index = index  ">
  <ul>
     <li> {{addedItem.name }}  <button class="btn" (click)="removeItem(index)"> delete </button> </li>
  </ul>
</div>

question from:https://stackoverflow.com/questions/65840393/removing-specific-item-in-cart-angular-10

Answer 1

Following changes should work.

HTML:

<div  class="col-12 " *ngFor="let addedItem of items; let i = index ">
  <ul>
     <li> {{addedItem.name }}  <button class="btn" (click)="removeItem(i)"> delete </button> </li>
  </ul>
</div>

cartComponent.ts

removeItem(index: number) {
     this.cartService.removeItem(index);
}

cartService.ts

removeItem(index: number){
      this.items.splice(index, 1);
  }