I am a beginner in Angular and I am looking to display dynamic data with edit and delete buttons. I have managed to display the data properly with headers and everything, but now I want to add an edit button.
Currently, I am passing each record's ID to the view and when I loop through to add the edit button, it displays multiple buttons instead of just one.
Below is the HTML code for the component:
<table class="table table-bordered table-hover" style="width:100%" border="1">
<thead class="thead" style="background-color:#3f51b5; color:white;">
<tr>
<th *ngFor="let label of model.label">
{{label}}
</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let key of model.TemplateJson">
<td scope="row" *ngFor="let k of key">{{k.value}}</td>
<th *ngFor="let btn of model.Id">
<button mat-raised-button style="width:100%; background-color:#3f51b5; color:white;" [routerLink]="['/formBuilder', {edit: btn}]">Edit</button>
</th>
</tr>
</tbody>
</table>
I am getting a list of IDs in model.Id, which is why I am seeing multiple buttons.
Here is an image of the output for better clarity: https://i.sstatic.net/Q7Wsk.png
Edit
Json object
[
{
"type":"number",
"label":"GR No",
"className":"form-control",
"name":"number-1557737728450",
"value":"1234"
},
{
"type":"text",
"label":"FirstName",
"className":"form-control",
"name":"text-1554701360234",
"value":"Jerry",
"subtype":"text"
},
... other JSON data ...
]
Edit:2
this.model = new FormRecords();
this.model.Id = this.formId;
this.model.label = this.label;
this.model.TemplateJson = this.keys;