Angular2 HTTP活字体JSON

Question

私はこのような1ローカルに保存されている "region.json" ファイルがあります：

import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES} from "angular2/core"; 
import {HTTPTestService} from "./http-test.service"; 

@Component({ 
    selector: 'my-app' 
}) 

@View({ 
    template: ` 

<table> 
    <thead> 
     <th>Region Id</th> 
     <th>Region</th> 
    </thead> 
    <tbody> 
     <tr *ngFor="#item of myData"> 
      <td>{{item.regionId}}</td> 
      <td>{{item.Region}}</td> 
     </tr> 
    </tbody> 
</table>` 
    }) 
export class AppComponent { 
myData:any; 
} 

：私はどのようにこの "的環境-app.component.ts" ファイルを持っている

{ 
    "regionId":1, 
    "region":"CAN" 
}, 
{ 
    "regionId":2, 
    "region":"CEN" 
} 

を

と私はのように見える「HTTP-test.service.ts」ファイルを持っている：フロントエンドで

import {Injectable} from "angular2/core"; 
import {Http} from "angular2/http"; 
import 'rxjs/add/operator/map'; 
import {Headers} from "angular2/http"; 
import {AppComponent} from "./environment_app.component"; 

@Injectable() 
export class HTTPTestService{ 
constructor (private _http: Http){} 

this.myData = {region:[]}; 
get("./region.json") { 
    return this._http.get("./region.json", { headers: headers }) 
     .map(res => res.json()) 
     .subscribe 
     (
     data => { 
      this.myData = data; 
     }); 
} 
} 

は、私は唯一の01としてヘッダを印刷することができています

私はすべてのJSONデータ私が間違っているのは何

を取得したいです？ お願いします。ありがとうございました。

ありがとうございます。

Answer 1

jsonの応答はmyDataという名前の変数に入ります。この変数は、サービスのメンバーであり、AppComponentクラスではありません。しかし、上記* ngForで

* ngFor = "MYDATAの＃項目は、" このMYDATA変数が満たされていなかったあなたのAppComponentクラスの一部です。

1. ファイルを読み込んだ後にJSONデータを返すあなたのサービスで行ったように、機能を加えます。

   はこれを行います。

2. そのデータをAppComponentに返します。
3. これをAppComponentのmyDataに割り当てます。