Question

我有以下结构的模型：

export class ExampleData{
    id: string;
    url: string;
}

我正在调用一个返回以下JSON的服务：

[
  {
    "id": "abc",
    "url": "/path/to/folder"
  },
  {
    "id": "def",
    "url": "/path/to/folder"
  }
]

通话功能如下：

getExampleData(): Observable<Array<ExampleData>> {

    let headers = new Headers({'Accept': 'application/json; charset=utf-8'});
    let options = new RequestOptions({headers: headers});

    return this.http.get(Endpoint.Data, API_CONFIG.urls.urlToService, options)
        .do(console.log).map((response) => response.json());
}

在我的浏览器的控制台中，服务调用打印结果，它工作正常，我看到返回的json。但是当我想访问内容时，它不起作用。他甚至没有进入forEach，因为它是空的。

forEach(this.exampleData, function (data) {
       alert(data.id);
    });

Answer 1

在您的组件中，您必须subscribe()到您的观察点。

所以看起来应该是这样的。

//whatever your component is, somewhere ngOnInit or Onchanges

this.myService.getExampleData().subscribe(d => this.data = d);

如果您打算只在html图层上显示，也可以使用async管道。

Answer 2

如果您提供组件代码段，那就更好了。你可以试试这个：

 getExampleData():  Observable<Response> {

    //options & headers...

    return this.http.get(Endpoint.Data, API_CONFIG.urls.urlToService, options)
        .map((response: Response) => response.json());
}

然后在您的组件上：

 exampleData: ExampleData[];

 this.dataService.getExampleData()
                 .subscribe(data => {
                  this.exampleData = data;
                  console.log(this.exampleData);
                  //Iterate through you data here
                 forEach(this.exampleData, function (data) {
                 alert(data.id);
                 });
            },
            error => {
       //Error
        }
      }

在Angular 2中访问JSON数据

2 个答案: