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

【问题标题】：How to set dynamic value to button from array in Angular2如何从Angular2中的数组中为按钮设置动态值
【发布时间】：2019-05-13 22:31:06
【问题描述】：

我是 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 列表，这就是为什么我得到这么多按钮。

在这里，我将输出图像包括在内，以便清楚地了解。

编辑

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;

【问题讨论】：

你能分享你的model.TemplateJson数组
@bhagwattupe 我没有得到那个model.TemplateJson的id
您似乎正在为每个 id 的每一行创建一个新的编辑按钮。您可能想使用编辑按钮删除 ngFor？至少如果我理解正确的话
@VitoInfinito 是的，但如果我删除 ngFor 并使用 model.Id 那么我的网址看起来像 localhost:4200/formBuilder;0=9;1=10;2=11;3=12;4=13 因为它返回 id 列表
您想在单击按钮上获取当前编辑的 ID。请发送您的modal对象json

标签： angular typescript angular5 angular7

【解决方案1】：

问题是这个循环*ngFor="let btn of model.Id"，删除循环，并在你的 routerLink 参数中使用你的记录 id（我猜它会在 key.Id 或其他东西上）

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

【讨论】：

但是 model.id 给了我 id 列表，所以我可以识别每条记录
在您的解决方案之后，我的网址看起来像 localhost:4200/formBuilder;0=9;1=10;2=11;3=12;4=13
所以首先如果 model.id 包含 ids 列表，称之为 model.ids （你的代码可以自己记录）你需要的是当前行的 id，
查看我的更新答案，顺便说一句，您的 localhost url 在互联网上无法访问
是的，我想要当前行 ID