Wie binde ich JSON-Objekt an Felder zu bearbeiten?

Question

Ich versuche eine Bearbeitungsschaltfläche hinzuzufügen, damit der Benutzer Tabellendaten mit dem Formular bearbeiten kann, das zum Übermitteln neuer Daten verwendet wird.

Wie binde ich die JSON-Objektdaten an die Formularelemente?

Mein Typoskript;

edit(id){ 

    this.http.get('api/getRequest.php?section=getProductSetupById&id='+ id) 
     .map((response: any = Response) => <EditProduct[]> response.json()[0]) 
     .subscribe(editProduct => this.editProducts= editProduct); 

} 

Eines meiner ionischen 2 Formelemente.

<ion-item> 
    <ion-label for="company">Company:</ion-label> 
    <ion-input formControlName="company" type="text" ngModel name="company" id="company"></ion-input> 
</ion-item> 

Ich bin noch relativ neu zu Angular und Ionic 2. Jede Hilfe wird sehr geschätzt werden.

Answer 1

Ihre Frage ist ein wenig schwer zu folgen, aber ich denke, Sie fragen, wie man die doppelte Binding-Syntax von Angular verwendet. Ich nehme an, dass Ihr Objekt "editProduct" ein Feld namens "Company" enthält?

in diesem Fall, dass Sie diese

In Ihrem Modul tun könnten Sie {FormsModule} importieren müssen von

'@ Winkel/forms' Dann, wenn Ihre editProduct.Company Änderungen in Typoskript, der Eingang wird aktualisiert, und wenn die Eingabe aktualisiert wird, wird auch Ihr editProduct.Company aktualisiert.

Dies ist eine Template-gesteuerte Bindung. Es ist der einfachste Weg mit Formen in Angular zu beginnen, denke ich!

Answer 2

Sie diesen Ansatz folgen:

Setter definieren und für das JSON Eingabefeld wie dies in Typoskript Komponente Getter:

public jsonArray; 

get someFunction() { 
    return JSON.stringify(this.jsonArray, null, 2); 
} 

set someFunction(value) { 
    try { 
     this.jsonArray= JSON.parse(value); 
    } 
    catch (e) { 
     console.log(e); 
    }; 
} 

Und In HTML-Teil bindet es wie folgt aus:

<textarea class="" id="json-input" placeholder="Paste json here." [(ngModel)]="someFunction"> 

Sie können es nach Ionic ändern, ich habe keine Erfahrung in Ionic. Hoffnung Das hilft.