如何在Angular2中将数组中的按钮设置为动态值

Question

我对angular是个新手，我想用编辑和删除按钮来显示动态数据，我现在已经做了这么多事情，数据可以用标题等正确显示，但现在我想给出编辑按钮。

因此，我将每个id记录传递给view，当我循环到edit按钮时，它将显示多个按钮，而不是一个按钮。

这里我提供了component.html代码

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

在model.Id获取列表的id，这就是为什么我会得到这么多按钮。

在这里，我包括了清晰的想法输出的图像。

​

编辑

Json对象

[  
   {  
      "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":"marilyn@gmail.com",
      "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":"elizabeth@gmail.com",
      "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":"carmelita@gmail.com",
      "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":"richard@gmail.com",
      "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":"paul@gmail.com",
      "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":"levi@gmail.com",
      "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"
   }
]

编辑:2

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

Answer 1

问题是这个循环参数，删除这个循环，并在routerLink参数中使用您的记录id (我猜它可能在key.Id或其他什么地方)

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