如何使用 API 响应数据制作 Angular 反应式（动态）表单？需要建议答案

【问题标题】：How to make Angular Reactive (Dynamic) form with API Response data? Need advise如何使用 API 响应数据制作 Angular 反应式（动态）表单？需要建议
【发布时间】：2022-01-02 19:49:37
【问题描述】：

[
  {
    "name": "jkjk",
    "firstName": "hgh",
    "lastName": "ehtrh",
    "replytype": "svdv",
    "prodCode": "svv",
    "executor": "ewwe",
    "skills": [
      {},
      {}
    ]
  },
  {
    "name": "sdkjbdsf",
    "firstName": "kdvbfd",
    "lastName": "dkbd",
    "replytype": "SQLServer",
    "prodCode": "vsdv",
    "executor": "vkjbndsf,vd",
    "skills": [
      {
        "name1": "abs"
      },
      {
        "name2": "bbs"
      }
    ]
  }
]

【问题讨论】：

这个问题太生了！提供一些信息并更清楚地说明情况。
当然。我想以 Angular 形式呈现 API 响应以进行编辑并再次保存。 [ {“名称”：“jkjk”，“名字”：“hgh”，“姓氏”：“ehtrh”，“replytype”：“svdv”，“prodCode”：“svv”，“执行者”：“ewwe”， “技能”：[{}，{}]}，{“名称”：“sdkjbdsf”，“名字”：“kdvbfd”，“姓氏”：“dkbd”，“回复类型”：“SQLServer”，“prodCode”： “vsdv”，“执行者”：“vkjbndsf,vd”，“技能”：[{“name1”：“abs”}，{“name2”：“bbs”}]}]
如果需要更多信息，请告诉我
可以通过Building dynamic forms
看看这个教程：htmlelements.com/docs/angular-dynamic-forms

标签： html angular forms dynamic angular-reactive-forms

【解决方案1】：

在这种情况下，我建议您使用*ngFor 循环并生成您的输入。

将键添加为name 属性并将值添加为值。

然后您可以像往常一样发布数据。

<form>
  <div *ngFor="let item of array">
    <ng-container *ngFor="let i of item | keyvalue">
      <input [name]=i.key [value]="i.value" />
    </ng-container>
  </div>
  <button type="submit" (click)="edit()"></button>
</form>

使用一些条件标签来提供其他类型的表单标签（select、textarea、...）。

【讨论】：