Angular 4, Verwenden von ngModel in Form Array (ReactiveFormsModule)

Question

Ich habe versucht, einfache Array-Form in eckigen 4, Und ich stieß auf ein seltsames Problem mit ngModel.

Bitte zuerst meine Codes sperren lassen.

Meine Methode

1. meine Form FormGroup definieren:

   public invoiceForm: FormGroup; 
   

2. Einstellung meiner Testdaten und Formular Modell:

   readonly local = [ 
   'Lorem ipsum dolor sit amet', 
   'et iusto odio dignissim qui blandit', 
   'Epsum factorial non deposit', 
   'Ma quande lingues coalesce' 
   ]; 
   public localModel = this.local; 
   

3. in ngOnInit definieren Formulargruppe und einfaches Add meine Einheimischen rudern in Formgruppe:

   this.invoiceForm = this._fb.group({ 
       itemRows: this._fb.array([this.initItemRows()]) 
   }); 
   
   
   for (let index in this.local) 
       this.setAndReplaceNewERow(+index) 
   

Vorerst sieht alles richtig gemacht. see result as image

Das Problem

Wenn ich einen der Texteingaben ändern, wird die Hauptvariable auch ändern.

Vor Wechsel:

FormGroup 
{ 
    "itemRows": [ 
    { 
     "itemname": "Lorem ipsum dolor sit amet" 
    }, 
    { 
     "itemname": "et iusto odio dignissim qui blandit" 
    }, 
    { 
     "itemname": "Epsum factorial non deposit" 
    }, 
    { 
     "itemname": "Ma quande lingues coalesce" 
    } 
    ] 
} 

My Local Data 
[ 
    "Lorem ipsum dolor sit amet", 
    "et iusto odio dignissim qui blandit", 
    "Epsum factorial non deposit", 
    "Ma quande lingues coalesce" 
] 

My Form Model 
[ 
    "Lorem ipsum dolor sit amet", 
    "et iusto odio dignissim qui blandit", 
    "Epsum factorial non deposit", 
    "Ma quande lingues coalesce" 
] 

Nach Wechsel:

FormGroup 
{ 
    "itemRows": [ 
    { 
     "itemname": "Lorem ipsum dolor sit amet" 
    }, 
    { 
     "itemname": "et iusto odio dignissim qui blandit" 
    }, 
    { 
     "itemname": "changed !!!!!!!!!!!" 
    }, 
    { 
     "itemname": "Ma quande lingues coalesce" 
    } 
    ] 
} 
My Local Data 
[ 
    "Lorem ipsum dolor sit amet", 
    "et iusto odio dignissim qui blandit", 
    "changed !!!!!!!!!!!", 
    "Ma quande lingues coalesce" 
] 
My Form Model 
[ 
    "Lorem ipsum dolor sit amet", 
    "et iusto odio dignissim qui blandit", 
    "changed !!!!!!!!!!!", 
    "Ma quande lingues coalesce" 
] 

DEMO

Bitte nehmen Sie sich einen Blick auf Plunk Demo

Answer 1

Also im Grunde wollen Sie Ihre readonly local Variable gleich bleiben ?

Sie brauchen nur das zu ändern:

public localModel = this.local; 

dazu:

public localModel = Object.assign({}, this.local); 

---

Was hier passiert: Ihre localModel bekommt die gleiche Referenz wie Ihre local Variable, und dann Beeinflussen Sie dies, um Ihr Formular zu modellieren. Wenn Sie also die Daten im Formular ändern, ändert sich die Referenz und somit ändert sich Ihr local Variablenwert.

Ich verwende die Object.assign() Methode, um eine neue Referenz mit dem gleichen Wert zu erstellen. Grundsätzlich ist es eine Kopie.

N.B: Wenn Sie Arrays verwenden, haben Sie die gleichen Probleme, da die Array-Referenz identisch ist. Daher müssen Sie möglicherweise eine so genannte Deep Copy erstellen, um eine neue Referenz des Arrays sowie eine Kopie Ihrer Werte darin zu erstellen.