如何从打字稿中的.json文件中读取数据

Question

我在 assets 文件夹中有一个名为 data.json 的 json 文件

{
    "response": {
        "sales_amount": 0,
        "collection_amount": 0,
        "carts_amount": 736.63,

}
}

我这样做是为了在 service.ts 文件中获取数据

 my_data: any;
  public getResponseData() : Promise<any> {
      if(typeof(this.my_data) === "undefined") {
            return this.http.get('assets/data.json')
            .toPromise().then(res => {

                                  this.my_data = res.json().response;
                                  return this.my_data;
                }).catch(this.handleError);
      } else {
          return Promise.resolve(this.my_data);
      }


  }

我在 this.my_data 中得到响应，但在 component.ts 文件中我正在这样做

ngOnInit(){


        this.myService.getResponseData().then(response => this.detailsdata = response);
}

但在 this.detailsdata 中，我什么也没得到。

然后我想在 html 文件中显示 sales_amount,collection_amount。

<div>
     <span>sales amount</span>
</div>

代替销售额，我想显示价值 这个怎么做。 我对 typescript 很陌生。任何人都可以帮我解决这个问题。

Answer 1

您的代码看起来正确。我刚刚在测试应用程序中检查了它。您需要的只是 html 文件中的几行代码。

请将以下代码添加到您的 html 文件中。

<p><b>sales amount:</b> {{ detailsdata?.sales_amount }}</p>
<p><b>collection amount:</b> {{ detailsdata?.collection_amount }}</p>
<p><b>carts amount:</b> {{ detailsdata?.carts_amount }}</p>

顺便说一句，你的 json 数据是无效的。删除carts_amount 属性后的逗号。

{
  "response": {
    "sales_amount": 6000.77,
    "collection_amount": 399.57,
    "carts_amount": 736.63
  }
}

更新：

ngOnInit(): void {

        this.myService.getResponseData().then((value) => {
            //SUCCESS
            console.log(value);
            this.detailsdata = value;

        }, (error) => {
            //FAILURE
            console.log(error);
        })
    }