I have a table with some data and a delete function on all rows which works but always delete the first row, doesn't matter if I click the delete button on other rows always delete the actual first row.
here is my code:
public deleteRow(recordId) {
console.log('recordId: ', recordId); // log: undefined
const dsData = this.dataSource.data;
console.log('dsData: ' , dsData); // log: list all the data I have in table
// For delete confirm dialog in deleteItem to match the db column name to fetch.
const name1 = 'id';
const record = dsData.find(obj => obj[this.Users.id] === recordId);
const name = 'Delete record with id:' + record[name1] + '?';
console.log('Record is: ', record); // log: all the data of the first row
console.log('Record id is: ' , recordId); // log: undefined
// Call the confirm dialog component
this.confirmService.confirm(name, record,'This action will delete the record!').pipe(
switchMap(res => {if (res === true) {
console.log('recordId: ', recordId); // log: undefined
return this.httpClientService.deleteRow(record);
}}))
.subscribe(
result => {
this.success();
// Refresh DataTable to remove row.
this.deleteRowDataTable (recordId, this.Users.id, this.paginator, this.dataSource);
},
(err: HttpErrorResponse) => {
console.log(err.error);
console.log(err.message);
this.messagesService.openDialog('Error', 'Delete did not happen.');
}
);
}
// Remove the deleted row from the data table. Need to remove from the downloaded data first.
private deleteRowDataTable (recordId, idColumn, paginator, dataSource) {
this.dsData = dataSource.data;
const itemIndex = this.dsData.findIndex(obj => obj[idColumn] === recordId);
dataSource.data.splice(itemIndex, 1);
dataSource.paginator = paginator;
}
The problem is with the Id as I see in the logs but I can't figure it out how can I fix it