Data table inline edit material angular－~

.ts

selectedRowData(row: DAS_AGENT_USER_LINK) {
this.selectedRow = row;
 
}

editRowData(isdisable: Boolean, row: DAS_AGENT_USER_LINK) {
// this.selectedRowTest = JSON.parse(JSON.stringify(row));
this.selectedRowTest = Object.assign({}, row);
console.log('editRowData');
console.log(this.selectedRowTest);
return true;
}

cancelRowData(rowIndex: any) {
console.log(rowIndex);
 
const data = this.mainTableDS.data;
const currIndex = this.paginator.pageIndex * this.paginator.pageSize + rowIndex;
data.splice(currIndex, 1, this.selectedRowTest);
this.mainTableDS.data = data;

this.consoleLogService.WriteLog('this.selectedRow:' + this.selectedRow);
}

html

<div class="example-container">
<mat-paginator #paginator [length]="totalCount " [pageIndex]="0 " [pageSize]="10 " [pageSizeOptions]="[5, 10, 15]">
</mat-paginator>
<mat-table [dataSource]="mainTableDS" matSort>
<mat-header-row *matHeaderRowDef="mainTableTitle;"></mat-header-row>
<mat-row *matRowDef="let Row; columns: mainTableTitle ;" (click)="selectedRowData(Row)" [class.active]="Row == selectedRow"></mat-row>
<!-- Action Buttons -->
<ng-container matColumnDef="ACTION_BUTTON" >
<mat-header-cell *matHeaderCellDef>ACTION_BUTTON</mat-header-cell>
<!-- collin : add let i = index ; -->
<mat-cell *matCellDef="let row ; let i = index; ">
<button *ngIf=!row.isDisabled mat-mini-fab color="accent" (click)="row.isDisabled=editRowData(row.isDisabled,row)">
<span matTooltip="Edit">
<mat-icon>edit</mat-icon>
</span>
</button>
<button *ngIf=row.isDisabled mat-mini-fab color="warn" (click)="cancelRowData(i); row.isDisabled=false">
<span matTooltip="Cancel">
<mat-icon>clear</mat-icon>
</span>
</button>
<button *ngIf=row.isDisabled mat-mini-fab color="accent" (click)="updatedRowData(row);row.isDisabled=false">
<span matTooltip="Confirm">
</mat-table>
</div>
<mat-icon>send</mat-icon>
</span>
</button>
<button *ngIf=!row.isDisabled mat-mini-fab color="accent" (click)="deleteRowData(row);row.isDisabled=false">
<span matTooltip="Delete">
<mat-icon>delete</mat-icon>
</span>
</button>
</mat-cell>
</ng-container>
</mat-table>
</div>
 
 