Angular Can Not Delete Grid List Element

Question

In my code, I have a grid where the user can enter elements. The user can later on edit or delete the elements he added. The problem is, when I try to delete an element from the middle or the end, the element on the top of the grid gets deleted rather than the one I want. Here is my code. What is wrong with it, and how should I fix it?

HTML:

        <button mat-icon-button>
            <mat-icon (click)="deleteWorkItem(row, i)">block</mat-icon>
        </button>

TS:

dataSource: MatTableDataSource<IMaterialPlanParameter>;
  deleteWorkItem(index: number) {
    let tempData = this.dataSource.data.slice(0);
    tempData.splice(index, 1);
    this.dataSource = new MatTableDataSource(tempData);
    this.EditIndex = undefined;
  }

Answer 1

Try this, I use lodash library to clone data,alternatively you can use the variable where you save the data, but it is not clear to me why and what you are passing in the html deleteWorkItem and why you are not calling both elements in the .ts

   deleteWorkItem(row, index) {
    let tempData = clone(this.dataSource.data);
    tempData.splice(index, 1);
    this.dataSource = new MatTableDataSource<IMaterialPlanParameter>(tempData);
  }

If this does not work, I recommend that you create an example with an interactive angular editor.