Angular 2 [typescript] Aktualisieren eines Modellwerts der UI der übergeordneten Komponente von einer untergeordneten Komponenten-UI mit dem JSON-Modell

Question

So aktualisieren Sie den JSON-Wert ' von einer untergeordneten Komponente zur übergeordneten Komponente. Wenn ich versuche, den Wert vom Kindmodell mit Ausgabeereignis in eine Elternkomponente zu aktualisieren, funktioniert nichts.

i all Details unten angegebene

Daten behandelt:

json: [{ 
     "inp": "hello", 
     "oup": "fello" 
}] 

Stammkomponente

// Parent Component 
@Component({ 
selector: 'parent', 
template: ` 
    <div>Parent sharedVarParent: {{sharedVarParent[0].oup}} 
    <input type="text" [ngModel]="sharedVarParent[0].oup"/> 
    </div> 
    <child [(sharedVar)]="sharedVarParent"></child> 

     `, 
    directives: [ChildComponent] 
}) 
export class ParentComponent { 
    sharedVarParent =[{ 
        "inp": "hello", 
        "oup": "fello" 
        }] 

    constructor() { console.clear(); } 
} 

childcomponent

import {Component, EventEmitter, Input, Output} from 'angular2/core' 

    // Child Component 
    @Component({ 
    selector: 'child', 
    template: ` 
    <p>Child sharedVar: {{sharedVar[0].oup}}</p> 
    <input [ngModel]="sharedVar[0].oup" (ngModelChange)="change($event)"> 
    ` 
    }) 
    export class ChildComponent { 
    @Input() sharedVar: string; 
    @Output() sharedVarChange = new EventEmitter(); 
    change(newValue) { 
     console.log('newvalue', newValue) 
     this.sharedVar = newValue; 
     this.sharedVarChange.emit(newValue); 
    } 
} 

Answer 1

Diese seltsam mir ein bisschen aussieht. Sie weisen dem Eingang den Wert fello zu und geben den aktualisierten Wert aus. Es scheint mir, wollen Sie die sharedVar

<input [(ngModel)]="sharedVar[0].oup" (ngModelChange)="change()"> 

change() { 
    this.sharedVarChange.emit(sharedVar); 
} 

Answer 2

stattdessen geändert auszusenden Gibt es einen Grund, warum Sie Ihre Array als Eingabe, statt nur die Zeichenfolge senden? plnkr

bei your sample Blick gibt es ein paar seltsamen Dinge:

1. Ihre Eltern Eingang ist eine Einbahn Bindung, ich weiß nicht, ob das Sie ist verwirrend, es ist ungewöhnlich, und fügt Verwirrung auf die Frage (fixed)

   <input [(ngModel)]="sharedVarParent[0].oup"/> 
   

2. da das Array durch Verweis als Eingabe übergeben wird, gibt es nicht wirklich eine Notwendigkeit für eine Leistung Ihres Kindes Komponente, wenn Sie ein neues Array erstellen, nur zwei-Wege-Bindung verwenden am Eingang in Ihrem Kind, und es wird die Eigenschaft auf dem ersten Objekt in dem gemeinsamen Array (sample)

   <input [(ngModel)]="sharedVar[0].oup"> 
   

   aktualisiert
   1. Sie Mischen den sharedVar Array als Eingabe vorbei und eine Ausgabe von Zeichenfolge vom Emitter, wenn der Textfeldwert des untergeordneten Elements aktualisiert wird. Wenn das passiert, ändert sich die Bindung im Elternteil sharedVarParent zu einer Zeichenkette, die das Ganze durcheinander bringt. Wenn der Elternteil das Kind instanziiert, setzt er die Eingabe sharedVar auf das Array. Wenn Sie das Textfeld des untergeordneten Elements eingeben, wird eine Zeichenfolge ausgegeben, und das übergeordnete Element ändert sharedVarParent in eine Zeichenfolge, die dann als Eingabe an das untergeordnete Element gesendet wird. plnkr