Angular2 HTTP 打字稿 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 class。然而，

*ngFor="#item of myData"

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

这样做：

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

Angular2 HTTP 打字稿 Json

Angular2 HTTP TypeScript Json

json

typescript

angular2-http