javascript - 保存从 ngFor 创建的表数据 Angular 2

Question

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

    <form [formGroup]="pagesForm">
        <tr *ngFor="let data of pagesArray; let i = index;  trackBy: trackByFn">
           <td style="text-align: center;" >
              <input type="text" formControlName="nameControl" value=[data.name]>
          </td>
           <td style="text-align: center;">
               <input type="text" formControlName="descriptionControl" 
               vaue=[data.description]>
           </td>

         </tr>
    <button class="btn btn-common" (click)="submit(pagesForm)">Save</button>
    </form>

谁能帮我批量保存这张表数据

Answer 1

在 react 形式的情况下，我建议这样做，尤其是在处理数组时......您需要一个 FormArray ，当您从后端获取值时将它们推送到其中。

因此您可以构建表单:

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

当您收到数据时，在回调中(subscribe 或 then 如果您使用的是 promises)调用一个方法，在本例中为 setFormArray() 填充您的表单数组:

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

希望对您有所帮助! :)