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

Posted 2023-03-13

【中文标题】使用 Ionic 2/AngularJS 显示 JSON 数据？

【英文标题】：Display JSON data with Ionic 2/AngluarJS?

【发布时间】：2018-04-13 14:19:04

【问题描述】：

我正在使用 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 @

【参考方案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>

【讨论】：

应该为方法定义添加返回类型。 getRemoteData() :Observable 将完成答案 :)

@PrithiviRaj 感谢您的提醒！！我已经用你的提示编辑了这篇文章:-)

@ChristianBenseler 我没有完全了解如何以及在何处分配 .getRemoteData() 返回值。我使用了您提供的代码并将data: any; 添加到 home.ts 中，如下所示：export class HomePage data: any; constructor(private dataService: DataProvider) ionViewDidLoad() this.dataService.getRemoteData().subscribe( response => this.data = response); 我仍然收到Cannot read property '0' of undefined.

@AdamDedanga 你在模板中使用 data[0]?.name 吗？如果是这样，请不要这样做。使用另一个标记（使用 ngIf）