如何使用离子2打字稿

Question

摆脱本地JSON数据，到HTML页面我有这种类型的JSON文件。

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

如何让每一个钥匙插入HTML页面或如何解析这个使用服务？

在此先感谢。

Answer 1

您可以通过创建一个服务提供商

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

您现在可以使用patdata在HTML

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