如何使用Angular 6在单击按钮时进行数据绑定

有没有办法通过单击按钮从json文件检索数据并将其绑定到两个或多个表单？ ->有两个按钮。

---

一个用于将数据发布到json文件（完成），另一个用于将表单中输入的数据复制到其他两个表单。

您可以使用load json file npm package读取json文件，然后将数据绑定到模型：

loadJsonFile('foo.json').then(json => {
console.log(json);

//sample:   
 const data = json; 
 this.property = json.foo;
//end sample

}))

单击事件的示例代码：

html:

---

我们可以发出HTTP请求来加载JSON文件

    import { Http } from '@angular/http';

    myData = new MyData();
    constructor(public http: Http ) { }

        getData() {
          this.http.get("FILE-URL/TO/JSON/FILE") // URL to your file like -> "assets/data.json"
          .map(res => return res.json())
          .subscribe(data => {
             //here data is JSON object
             this.myData = data;
          })
      }

class MyData {
  public prop1: string,
  public prop2: string
}

您可以将myData类属性绑定到表单字段

<form>
    <input type="text" [(ngModel)]="myData.prop1">
    <input type="text" [(ngModel)]="myData.prop2">
</form>

您可以制作对象的副本并将其分配给

ngModel

。请为我们提供您的代码，以便更好地帮助您。这整件事都将在一个函数中出现，单击鼠标右键将触发？@kedked是的，我编辑我的答案并编写示例代码我们需要导入该软件包吗？@kedked是的使用以下命令安装此软件包：npm install load json file

    import { Http } from '@angular/http';

    myData = new MyData();
    constructor(public http: Http ) { }

        getData() {
          this.http.get("FILE-URL/TO/JSON/FILE") // URL to your file like -> "assets/data.json"
          .map(res => return res.json())
          .subscribe(data => {
             //here data is JSON object
             this.myData = data;
          })
      }

class MyData {
  public prop1: string,
  public prop2: string
}

<form>
    <input type="text" [(ngModel)]="myData.prop1">
    <input type="text" [(ngModel)]="myData.prop2">
</form>