Question

我正在从后端获取的数据中创建一个可编辑的表，现在我想保存已更新的数据。我尝试过使用formControl，但它只保存最后一列中的数据这是我的代码

ANÁLISE8

任何人都可以帮我批量保存此表格数据

Answer 1

如果是反应形式，我建议，特别是在处理数组时......你需要一个FormArray，当你从后端获取它们时，你可以推送它们。

所以你可以建立你的表格：

constructor(private fb: FormBuilder) {
  this.pagesForm = this.fb.group({
    arr: this.fb.array([])
  })
}

当您收到数据时，在回调（subscribe或then中，如果您使用的是promises）调用一个方法，在此示例中setFormArray()填充表单数组：< / p>

setFormArray() {
  let arr = this.pagesForm.controls.arr;
  this.pagesArray.forEach(x => {
    arr.push(this.fb.group({
      name: x.name,
      description: x.description
    }))
  })
}

然后您可以修改模板以迭代formarray：

<form [formGroup]="pagesForm" (ngSubmit)="submit(pagesForm.value)">
  <div formArrayName="arr">
    <tr *ngFor="let page of pagesForm.controls.arr.controls; let i = index" 
        [formGroupName]="i" >
      <td>
        <input type="text" formControlName="name">
      </td>
      <td>
        <input type="text" formControlName="description">
      </td>    
    </tr>
  </div>
  <button type="submit">Save</button>
</form>

现在你最终得到一个包含属性arr的表单对象，它是一个数组数组。

这是一个演示：http://plnkr.co/edit/zfpbUzkvMLOn8CCermGD?p=preview

希望这有帮助！：）

保存从ngFor创建的表数据角度2

1 个答案: