angular – 如何使用离子2打字稿从本地JSON获取数据到HTML页面

发布时间：2020-12-17 07:35:37 所属栏目：安全来源：网络整理

导读：我有这种类型的 JSON文件. { "records": { "patients": { "day": "Today","details": [ { "name":"Diab","stat":"Pending","phno":"8197246465","patNames":"Sandra Adams","tests": [ {"name":"MCHC","result":"positive"} ] } ] } }} 如何将每个密钥带入ht

我有这种类型的 JSON文件.

{
  "records": {
    "patients": {
      "day": "Today","details": [
        {
          "name":"Diab","stat":"Pending","phno":"8197246465","patNames":"Sandra Adams","tests": [
            {"name":"MCHC","result":"positive"}
          ]
        }
      ]
    }
  }
}

如何将每个密钥带入html页面或如何使用服务解析这个？

提前致谢.

您可以通过创建服务提供商来实现

import {Injectable} from '@angular/core';
import {Http,Response} from '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class yourService {
    constructor(public http:Http) {}

getData() {
    return this.http.get("YOUR_PATH_TO_THE_JSON_FILE")
        .map((res:Response) => res.json().YOUR_JSON_HEADER); //records in this case
  }
}

在ts构造函数中定义服务并调用方法来解析数据

this.yourService.getData().subscribe((data) => {
  console.log("what is in the data ",data);
  this.myjsondata = data;
});

确保在app.module.ts中定义服务提供者

对于您的案例中的承诺,修改代码如下：
在您的服务中.

load() {
    console.log('json called');
    return new Promise(resolve => {
        this.http.get('assets/data/patient.json').map(response => {
            this.data = response.json();
            resolve(this.data);
        });
    });
}

在这里,您将获得数据并解决承诺.要在html中使用它,您必须按如下方式获取组件页面中的数据.

this.yourService.load().then((data) => {
      console.log("what is in the data ",data);
      this.patdata= data;
    });

您现在可以在HTML中使用patdata

<h1> {{patdata | json}} </h1>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!