En mi código, tengo una cuadrícula donde el usuario puede ingresar elementos. Posteriormente, el usuario puede editar o eliminar los elementos que agregó. El problema es que cuando trato de eliminar un elemento del medio o del final, el elemento en la parte superior de la cuadrícula se elimina en lugar del que quiero. Aquí está mi código. ¿Qué tiene de malo y cómo debo solucionarlo?
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; }Pruebe esto, uso la biblioteca lodash para clonar datos, alternativamente puede usar la variable donde guarda los datos, pero no me queda claro por qué y qué está pasando en el html deleteWorkItem y por qué no está llamando a ambos elementos en el .ts
deleteWorkItem(row, index) { let tempData = clone(this.dataSource.data); tempData.splice(index, 1); this.dataSource = new MatTableDataSource<IMaterialPlanParameter>(tempData); }Si esto no funciona, te recomiendo que crees un ejemplo con un editor angular interactivo.