Question

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

如何将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);

}

我的离子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的新手。任何帮助都将不胜感激。

Answer 1

您的问题有点难以理解，但我认为您在询问如何使用Angular的双重绑定语法。我假设你的＆＃34; editProduct＆＃34;对象有一个名为＆＃34; Company＆＃34;在它上面？

在这种情况下你可以这样做

在您的模块中，您需要从＆＃39; @ angular / forms＆＃39;

导入{FormsModule}

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

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

Answer 2

您可以遵循以下方法：

在typescript组件中为JSON Input字段定义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的经验。希望这会有所帮助。

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

2 个答案: