如何将 JSON 对象绑定到表单字段以进行编辑？答案

【问题标题】：How do i bind JSON Object to form fields to edit them?如何将 JSON 对象绑定到表单字段以进行编辑？
【发布时间】：2017-09-09 13:35:02
【问题描述】：

我正在尝试添加一个编辑按钮，以使用户能够使用他们用来提交新数据的表单来编辑表格数据。

如何将 JSON 对象数据绑定到表单元素？

我的打字稿；

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

}

My ionic 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 和 Ionic 2 还是比较陌生。任何帮助将不胜感激。

【问题讨论】：

标签： json angular ionic2

【解决方案1】：

您的问题有点难以理解，但我认为您在问如何使用 Angular 的双重绑定语法。我假设您的“editProduct”对象上有一个名为“Company”的字段？

在这种情况下，您可以这样做

在您的模块中，您需要从 '@angular/forms' 导入{ FormsModule }

然后，每当您的 editProduct.Company 在 typescript 中更改时，输入就会更新，并且每当输入更新时，您的 editProduct.Company 也会更新。

这是模板驱动的绑定。我认为这是从 Angular 中的表单开始的最简单方法！

【讨论】：

【解决方案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的经验。希望这会有所帮助。

【讨论】：