保存表數據角度2從ng創建

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

在反應形式的情況下， ，我建議，特別是在處理數組時......因爲您需要一個FormArray，當您從後端獲取值時，您會將其值推送到該數組中。

所以，你可以建立自己的形式：

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

，當你收到你的數據，在回調（subscribe或then如果您使用的承諾）調用一個方法，在這個例子中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

希望這有助於！ :)