如何从Angular2中的数组设置按钮的动态值

时间：2019-05-13 13:36:41

标签： angular typescript angular5 angular7

我对angular还是陌生的，我想使用“编辑”和“删除”按钮显示动态数据，我已经做了很多事情，现在数据可以正确显示在标题和其他地方了，但是现在我想使用“编辑”按钮。

因此，我正在传递ID的每个记录以进行查看，当我循环浏览编辑按钮时，它将显示按钮的数量，而不是一个按钮。

我在这里提供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列表，这就是为什么我要获得这么多按钮的原因。

在这里，为了清晰的主意，我包括输出图像。 enter image description here

编辑

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;

1 个答案:

答案 0 :(得分：0)

问题是这个循环*ngFor="let btn of model.Id"，删除该循环，并在routerLink参数中使用您的记录ID（我想它应该在key.Id或其他内容上）

<th>
   <button mat-raised-button [routerLink]="['/formBuilder',yourRowId, {edit: btn}]">Edit</button>
</th>
相关问题
最新问题