如何使用离子2打字稿

摆脱本地JSON数据，到HTML页面我有这种类型的JSON文件。如何使用离子2打字稿

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

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

在此先感谢。

来源

2016-11-29 Santhosh Kumar

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

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>

来源

2016-11-29 06:31:14 AishApp

'负载（）{ 的console.log（ 'JSON称为'）; 返回新的Promise（解析=> { this.http.get（'assets/data/patient.json'）。subscribe（response => {this.data = response.json（）; console.log（“ JSON数据”）; 的console.log（this.data）; this.processData（this.data）; 的console.log（this.data）; 解析（this.data）; }）;} ） ; }'里面的评论 –

代码转换的JSON承诺，然后返回数据。虽然我共享的代码使用可观察的。你可以根据你的需要使用它们中的任何一个。决定之前对观察到的和承诺之间的差别来看看:) – AishApp

好其工作，而不是'this.myjsondata = data'我使用'this.patDat = data'。那么如何把它带到html。 –

如何使用离子2打字稿

回答

相关问题