I am new to angular and i want to show dynamic data with edit and delete button i have done so many thing right now data are display properly with header and etc but now i want to give edit button.

So i am passing each records of id to view and when i loop through to edit button it will display number of button rather than one button.

Here i am providing component.html code

 <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>

In model.Id getting list of id that why i am getting so many button.

Here i am including image of output for clear idea. enter image description here

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"
   },
   {  
      "type":"text",
      "label":"LastName",
      "className":"form-control",
      "name":"text-1554701374890",
      "value":"Foster",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Class",
      "className":"form-control",
      "name":"text-1557737708598",
      "value":"X",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date of Birth",
      "className":"form-control",
      "name":"date-1554701421490",
      "value":"2019-04-30"
   },
   {  
      "type":"text",
      "label":"Comment",
      "className":"form-control",
      "name":"text-1557396998516",
      "value":"New Admission",
      "subtype":"text"
   }
][  
   {  
      "type":"number",
      "label":"GR No",
      "className":"form-control",
      "name":"number-1557737728450",
      "value":"2345"
   },
   {  
      "type":"text",
      "label":"FirstName",
      "className":"form-control",
      "name":"text-1554701360234",
      "value":"Jeffrey",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"LastName",
      "className":"form-control",
      "name":"text-1554701374890",
      "value":"Tucker",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Class",
      "className":"form-control",
      "name":"text-1557737708598",
      "value":"X",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date of Birth",
      "className":"form-control",
      "name":"date-1554701421490",
      "value":"2019-05-01"
   },
   {  
      "type":"text",
      "label":"Comment",
      "className":"form-control",
      "name":"text-1557396998516",
      "value":"New Admission",
      "subtype":"text"
   }
][  
   {  
      "type":"number",
      "label":"GR No",
      "className":"form-control",
      "name":"number-1557737728450",
      "value":"3456"
   },
   {  
      "type":"text",
      "label":"FirstName",
      "className":"form-control",
      "name":"text-1554701360234",
      "value":"Anne",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"LastName",
      "className":"form-control",
      "name":"text-1554701374890",
      "value":"Cloyd",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Class",
      "className":"form-control",
      "name":"text-1557737708598",
      "value":"XI",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date of Birth",
      "className":"form-control",
      "name":"date-1554701421490",
      "value":"2019-05-03"
   },
   {  
      "type":"text",
      "label":"Comment",
      "className":"form-control",
      "name":"text-1557396998516",
      "value":"New Admission",
      "subtype":"text"
   }
][  
   {  
      "type":"number",
      "label":"GR No",
      "className":"form-control",
      "name":"number-1557737728450",
      "value":"4567"
   },
   {  
      "type":"text",
      "label":"FirstName",
      "className":"form-control",
      "name":"text-1554701360234",
      "value":"Kristina",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"LastName",
      "className":"form-control",
      "name":"text-1554701374890",
      "value":"Baker",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Class",
      "className":"form-control",
      "name":"text-1557737708598",
      "value":"XI",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date of Birth",
      "className":"form-control",
      "name":"date-1554701421490",
      "value":"2019-05-05"
   },
   {  
      "type":"text",
      "label":"Comment",
      "className":"form-control",
      "name":"text-1557396998516",
      "value":"New Admission",
      "subtype":"text"
   }
][  
   {  
      "type":"number",
      "label":"GR No",
      "className":"form-control",
      "name":"number-1557737728450",
      "value":"56789"
   },
   {  
      "type":"text",
      "label":"FirstName",
      "className":"form-control",
      "name":"text-1554701360234",
      "value":"Christopher",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"LastName",
      "className":"form-control",
      "name":"text-1554701374890",
      "value":"Smith",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Class",
      "className":"form-control",
      "name":"text-1557737708598",
      "value":"XII",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date of Birth",
      "className":"form-control",
      "name":"date-1554701421490",
      "value":"2019-04-29"
   },
   {  
      "type":"text",
      "label":"Comment",
      "className":"form-control",
      "name":"text-1557396998516",
      "value":"New Admission",
      "subtype":"text"
   }
][  
   {  
      "type":"text",
      "label":"Name",
      "name":"text - 1554220470561",
      "value":"Marilyn",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Email",
      "className":"form-control",
      "name":"text-1557726629007",
      "value":"[email protected]",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"PhoneNumber",
      "className":"form-control",
      "name":"text-1557738193617",
      "value":"9898989898",
      "subtype":"text"
   },
   {  
      "type":"textarea",
      "label":"Message",
      "className":"form-control",
      "name":"textarea-1557738218005",
      "value":"We had issue regarding our existing website. Please help us.",
      "subtype":"textarea"
   }
][  
   {  
      "type":"text",
      "label":"Name",
      "name":"text - 1554220470561",
      "value":"Elizabeth",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Email",
      "className":"form-control",
      "name":"text-1557726629007",
      "value":"[email protected]",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"PhoneNumber",
      "className":"form-control",
      "name":"text-1557738193617",
      "value":"9898989898",
      "subtype":"text"
   },
   {  
      "type":"textarea",
      "label":"Message",
      "className":"form-control",
      "name":"textarea-1557738218005",
      "value":"I have placed wrong order and i want to cancel this my order. ",
      "subtype":"textarea"
   }
][  
   {  
      "type":"text",
      "label":"Name",
      "name":"text - 1554220470561",
      "value":"Carmelita",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Email",
      "className":"form-control",
      "name":"text-1557726629007",
      "value":"[email protected]",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"PhoneNumber",
      "className":"form-control",
      "name":"text-1557738193617",
      "value":"9898989898",
      "subtype":"text"
   },
   {  
      "type":"textarea",
      "label":"Message",
      "className":"form-control",
      "name":"textarea-1557738218005",
      "value":"My website crash when place order",
      "subtype":"textarea"
   }
][  
   {  
      "type":"text",
      "label":"Patient FirstName",
      "className":"form-control",
      "name":"text-1555049946945",
      "value":"Richard",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Patient LastName",
      "className":"form-control",
      "name":"text-1555049947305",
      "value":"Brown",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Email",
      "className":"form-control",
      "name":"text-1557740025898",
      "value":"[email protected]",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Blood Group",
      "className":"form-control",
      "name":"text-1555049953585",
      "value":"B+",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date Of Birth",
      "className":"form-control",
      "name":"date-1555049951249",
      "value":"2019-02-06"
   }
][  
   {  
      "type":"text",
      "label":"Patient FirstName",
      "className":"form-control",
      "name":"text-1555049946945",
      "value":"Paul",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Patient LastName",
      "className":"form-control",
      "name":"text-1555049947305",
      "value":"Stein",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Email",
      "className":"form-control",
      "name":"text-1557740025898",
      "value":"[email protected]",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Blood Group",
      "className":"form-control",
      "name":"text-1555049953585",
      "value":"O+",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date Of Birth",
      "className":"form-control",
      "name":"date-1555049951249",
      "value":"2019-02-20"
   }
][  
   {  
      "type":"text",
      "label":"Patient FirstName",
      "className":"form-control",
      "name":"text-1555049946945",
      "value":"Levi",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Patient LastName",
      "className":"form-control",
      "name":"text-1555049947305",
      "value":"Stjohn",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Email",
      "className":"form-control",
      "name":"text-1557740025898",
      "value":"[email protected]",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Blood Group",
      "className":"form-control",
      "name":"text-1555049953585",
      "value":"AB+",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date Of Birth",
      "className":"form-control",
      "name":"date-1555049951249",
      "value":"2019-03-08"
   }
]

Edit:2

 this.model = new FormRecords();
    this.model.Id = this.formId;
    this.model.label = this.label;
    this.model.TemplateJson = this.keys;

1 Answers

0
RezaRahmati On

The issue is this loop *ngFor="let btn of model.Id", remove the loop, and use your record id (I guess it would be on key.Id or something) in your routerLink params

<th>
   <button mat-raised-button [routerLink]="['/formBuilder',yourRowId, {edit: btn}]">Edit</button>
</th>