Question

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

数据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>但我一直收到错误消息，Can't read property '0' of undefined

Answer 1

两点：您要么将请求中的值分配给组件的属性，要么在模板中等待分配此属性。

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

getRemoteData(){

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

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

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

如前所述，在模板中

检查“数据”是否存在：

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

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

1 个答案: