JSONオブジェクトをフォームフィールドにバインドして編集するにはどうすればよいですか？

Question

私は、ユーザーが新しいデータを送信するために使用するフォームを使用してテーブルデータを編集できるように、編集ボタンを追加しようとしています。

フォーム要素にJSONオブジェクトデータをバインドするにはどうすればよいですか？

私のtypescript;

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

} 

私のイオン2型元素の一つ。

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

私はAngular and Ionic 2にはまだ比較的新しいです。どんな助けも大歓迎です。

Answer 1

あなたの質問は少し難しいですが、Angularの二重バインディング構文の使い方を尋ねると思います。あなたの "editProduct"オブジェクトには "Company"というフィールドがありますか？あなたが入力し、typescriptですで

そして、いつでもあなたのeditProduct.Companyの変更「角度/フォーム@」から{FormsModule}をインポートする必要がありますあなたのモジュールでは、この

を行うことができ、この場合

入力が更新されるたびに、editProduct.Companyも更新されます。

これはテンプレート駆動型のバインディングです。 Angularでフォームを開始するのが最も簡単な方法だと思います！

Answer 2

あなたは、このアプローチに従うことができます。

はtypescriptですコンポーネントでは、このようなJSON入力フィールドのsetterと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); 
    }; 
} 

そしてHTMLでこのようなことバインド一部：

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

を

Ionicに応じて修正できますが、Ionicには経験はありません。 希望これは役立ちます。