En mi aplicación, tengo una lista donde el usuario puede agregar y eliminar elementos. Mi problema es que cuando hago clic en un elemento (puede estar en el medio, al final, etc.), elimina el primer elemento de la lista. Y cuando actualizo la página, puedo ver los elementos 'eliminados' anteriormente. Como si no hubiera borrado nada. Aquí está mi código. ¿Qué tiene de malo y cómo debo solucionarlo?

HTML:

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

TS:

 deleteWorkItem(row: IProduct, index: number) { let supplierProduct: ISupplierProduct = { Supplier: { SupplierId: this.SupplierId }, Product: { ProductId: row.ProductId } }; this.confirmDialogRef = this._dialog.open(FuseConfirmDialogComponent, { disableClose: false }); this.confirmDialogRef.componentInstance.confirmMessage = 'Ürünü silmek istiyor musunuz?'; this.confirmDialogRef.afterClosed().subscribe(result => { if (result) { this._service.update('Supplier/DeleteSupplierProduct', supplierProduct).subscribe(response => { this._customNotificationService.Show('Ürün silindi', 'Tamam', 2); }); let tempData = this.dataSource.data.slice(0); tempData.splice(index, 1); this.dataSource = new MatTableDataSource(tempData); this.EditIndex = undefined; this._products = this.dataSource.data; this.ProductChange.emit(this._products); } }); }