Angular2 HTTP TypeScript Json

Question

我有一个本地存储的“region.json”文件，如下所示：

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

我有“enviroment-app.component.ts”文件，如下所示：

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

我有“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;
         });
}
}

在前端，我只能将标题打印为

我想获取所有json数据

我做错了什么？ 请，任何帮助表示赞赏，

提前致谢。

Answer 1

json的响应在一个名为myData的变量中。此变量是服务的成员，而不是您的AppComponent类。但是，

* ngFor =“＃item of myData”

在上面的* ngFor中，这个myData变量是AppComponent类的一部分，它从未填充过。

这样做：

1. 创建一个函数，就像您在服务中所做的那样，在读取文件后返回json数据。
2. 将该数据返回给AppComponent。
3. 将其分配给AppComponent中的myData。