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

但是在这个.detailsdata中我没有得到任何东西。

之后我想在 html 文件中显示 sales_amount ， collection_amount 。

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

代替销售额我想显示价值这该怎么做。我是打字稿的新手。任何人都可以帮助我。

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

如何从typescript中的.json文件中读取数据

1 个答案: