How to make each object in array its own element [duplicate] - html

Question

This question already has an answer here:
Mat Table:-How to get one particular element of a particular row on a button click in Mat table angular?
(1 answer)
Closed yesterday.
I have an array of objects that I am using to make a table in Angular. The table works great and adds the data correctly. I am now wanting to be able to edit each object within the table. For example if I wanted to change John Smiths name. How would I make each object in the array its own element so that I can make changes to them individually? Right now if I check 'this.dataFromQuery' it brings back the entire result.
Array: `[
{ first_name: 'John ', last_name: 'Smith', jobNumber: 123 },
{ first_name: 'Smith', last_name: 'John', jobNumber: 321 },
{ first_name: 'Alex', last_name: 'Mason', jobNumber: 10101 },
{ first_name: 'Mason', last_name: 'Alex', jobNumber: 100101 }
]`
Table HTML `
<table mat-table [dataSource]="dataFromQuery.result" class="mat-elevation-z8">
<ng-container matColumnDef="first_name">
<th mat-header-cell *matHeaderCellDef>First Name</th>
<td mat-cell *matCellDef="let element"> {{element.first_name}} </td>
</ng-container>
<ng-container matColumnDef="last_name">
<th mat-header-cell *matHeaderCellDef>Last Name </th>
<td mat-cell *matCellDef="let element"> {{element.last_name}} </td>
</ng-container>
<ng-container matColumnDef="job_Number">
<th mat-header-cell *matHeaderCellDef> Job Number </th>
<td mat-cell *matCellDef="let element"> {{element.jobNumber}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element">
<button (click)="openDialog()" mat-mini-fab color="primary" aria-label="Example icon button with a menu icon">
<mat-icon>edit</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>"
`
TS
getDataFromAPi(){
this.service.showDataToClient().subscribe((response) => {
console.log("Query Results ", response)
this.dataFromQuery = response
return this.dataFromQuery.result
}, (error) => {
console.log("error", error)
})
}

Answer 1

You already have the "current" row element at hand. All you need to do ti is pass it into the click handler and edit the signature of the method:
<table mat-table [dataSource]="dataFromQuery.result" class="mat-elevation-z8">
...
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element"> <!--- Here you have the row data as "element". Pass it to the "click" handler next line: -->
<button (click)="openDialog(element)" mat-mini-fab color="primary" aria-label="Example icon button with a menu icon">
<mat-icon>edit</mat-icon>
</button>
</td>
</ng-container>
</table>"
Inside your .ts file you need to edit the signature:
openDialog(element: SomeType) {}