如何使用離子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打字稿

回答

相關問題