Splice deletes first index of the array no matter which item i click

I am trying to create a drag and drop scenario where an original list is constant with the same fields, the second array is a unique list depending on the drag and drops.

The problem lies when i try to delete from the unique list, No matter which button i click, the index of -1 is deleted(hence index zero being the next to delete).

i cant seem to get it working and its starting to wreck my head,

help appreciated cheers folks.

user-controls.component.ts

FullDealList = [ 

{ id: '1', Data: '', API: '', Position: ''}, { id: '2', Data: '', API: '', Position: ''}, { id: '3', Data: '', API: '', Position: ''}, { id: '4', Data: '', API: '', Position: ''}, { id: '5', Data: '', API: '', Position: ''}, { id: '6', Data: '', API: '', Position: ''}, { id: '7', Data: '', API: '', Position: '' }, { id: '8', Data: '', API: '', Position: '' } ];

UserDealList = [ { id: 'A', Data: '', API: '', Position: '' }, { id: 'B', Data: '', API: '', Position: '' }, { id: 'C', Data: '', API: '', Position: '' }, { id: 'D', Data: '', API: '', Position: '' }, { id: 'E', Data: '', API: '', Position: '' }, { id: 'F', Data: '', API: '', Position: '' }, { id: 'G', Data: '', API: '', Position: '' }, { id: 'H', Data: '', API: '', Position: '' } ];

Remove(item) { 

console.log(this.UserDealList); this.UserDealList.splice(item, 1); console.log('Deleted ' + item.id); console.log('Deleted ' + this.UserDealList.indexOf(item.id)); console.log(this.UserDealList); }

user-controls.component.html

<div class="main"> 

<mat-card class="DealList-container"> <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="FullDealList" [cdkDropListConnectedTo]="[doneList]" class="DealList-list" (cdkDropListDropped)="drop($event)"> <div class="DealList-box" *ngFor="let item of FullDealList" cdkDrag>{{item.id}} </div> </div> </mat-card>

<mat-card class="DealList-container"> 

<div cdkDropList #doneList="cdkDropList" [cdkDropListData]="UserDealList" [cdkDropListConnectedTo]="[todoList]" class="DealList-list" (cdkDropListDropped)="drop($event)"> <div class="DealList-box" *ngFor="let item of UserDealList " cdkDrag> {{item.id}}<button class="btn mat-button" (click)="Remove(item)">X</button></div> </div> </mat-card>

</div>

submitted by /u/wazzalk
[link] [comments]
Source: Reddit