Tabellendaten speichern Angular 2 erstellt von ngFor

Question

Ich erstelle eine bearbeitbare Tabelle aus den Daten, die ich vom Back-End bekomme Ich möchte jetzt die Daten speichern, die aktualisiert wurden. Ich habe mit Formcontrol versucht, aber es nur die Daten speichern, die hier in der letzten Spalte ist mein Code

<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> 

Kann mir jemand helfen, diese Tabellendaten in loser Schüttung

Answer 1

Bei reaktiver Form zu speichern , was ich vor allem im Umgang mit einem Array vorschlage ... damit brauchst du eine FormArray, auf die du deine Werte schiebst, wenn du sie vom Backend bekommst.

So können Sie Ihre Form bauen:

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

und wenn Sie Ihre Daten erhalten, in der Callback (subscribe oder then wenn Sie verspricht verwenden) rufen eine Methode, die in diesem Beispiel setFormArray(), Das füllt das Formular Array:

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

Dann können Sie Ihre Vorlage ändern die formarray iterieren:

<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> 

Jetzt haben Sie am Ende ein Formularobjekt, das die Eigenschaft arr enthält, die ein Array Ihrer Daten ist.

Hier ist eine Demo: http://plnkr.co/edit/zfpbUzkvMLOn8CCermGD?p=preview

hoffe, das hilft! :)