时间戳

首页 > 解决方案 > 如何以角度形式更新动态生成的键和值

angular - 如何以角度形式更新动态生成的键和值

问题描述

我有一个类似的数据：

"data": [
   {
    "name": "Joe"
   },
   {
    "location": "USA"
   },
   {
    "age": "unknown"
   }
 ]

注意：此对象可能会有所不同（不是固定长度）。

我以如下形式显示：

名称（作为标签）：Joe（作为输入值）

位置（作为标签）：美国（作为输入值）

年龄（作为标签）：未知（作为输入值）

app.component.html：

<form [formGroup]="angularForm">
   <div class="key-value-container" *ngFor="let item of values">
      <div class="key-value">
         <div class="key-value-lable">
            <label class="label">{{item.key}}</label>
         </div>
         <div class="input-container">
           <input class="input-text" matInput value="{{item.value}}">
         </div>
        </div>
      </div>
 <button type="button" class="primary-button" mat-flat-button (click)="_updateForm()">Update</button>
</form>

当我单击“_updateForm()”时，我想通过 POST 方法更新数据，例如：

{
 "key1" (name):"value1"(updated_name),
 "key2" (location):"value2"(updated_location),
 "key3"(age):"value3" (updated_age)
}

以及如何为这个表单创建formControlerName ？

标签： angularangular-materialangular-reactive-forms

解决方案

formControlName 可以动态设置：

<input *ngFor="let field of dynamicData" [formControlName]="field.name">

如果您将数据更改为具有一致键的内容，则逻辑会容易得多，例如：

 [
   {"label": "first", "value": "Mark"},
   {"label": "last", "value": "Smith"},
   {"label": "age", "value": "35"}
];

您仍然可以使用您的数据完成，只需要一些额外的步骤。请参阅以下与您尝试执行的操作类似的示例：

https://stackblitz.com/edit/angular-form-array-dynamic?embed=1&file=src/app/app.ts

推荐阅读