Question

是否可以通过单击按钮从json文件中检索数据并将其绑定到两个或多个表单？ ->有2个按钮。一种将数据发布到json文件（完成），另一种将以表格形式输入的数据复制到其他两种形式。

Answer 1

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

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

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

}）;

点击事件的示例代码：

html：

//<button (click)="onClickMe()">Click me!</button>
//<p>{{property}}</p>

comonentfile.ts：函数onClickMe（）{

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

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

});

}

Answer 2

我们可以发出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>

如何使用Angular 6进行数据绑定onclick按钮

2 个答案: