使用 Ionic 2/AngularJS 显示 JSON 数据？

Question

我正在使用 AngularJS/Ionic 2 获取 API 数据。我遵循 this 指南并在我转到 home.html 时让它正确记录数据。但是当我尝试在 home.html 中实际显示数据时，我无法让它工作。

data-provider.ts：

getRemoteData(){

this.http.get('https://api.example.com/?limit=10').map(res => res.json()).subscribe(data => {
  console.log(data);
});

}

home.ts:

ionViewDidLoad(){
    this.dataService.getRemoteData();
  }

这会正确记录 JSON 数据：

[
    {
        "id": "a", 
        "name": "ExampleA", 
        "price": "10"
    }, 
    {
        "id": "b", 
        "name": "ExampleB", 
        "price": "15"
    }
]

我尝试返回数据而不是记录数据，然后在 home.ts 中创建变量 data: any; 并将 home.html 中的数据输出为 <p> data[0].name </p> 但我一直收到错误消息 @987654327 @

Answer 1

两点：您必须将请求中的值分配给组件的属性，然后在模板中等待该属性被分配。

您的服务/提供者应该是（仅）：

getRemoteData(){

  return this.http.get('https://api.example.com/?limit=10')
  .map(res => res.json());
}

你不应该订阅其中的 observable。在组件中执行此操作：

ionViewDidLoad(){
  this.dataService.getRemoteData().subcribe( response => this.data = response);
}

在模板中，如前所述，检查“数据”是否存在：

<p *ngIf="data">data[0].name </p>