Angular 在Ionic中从JSON提取数据

我最近一直在尝试离子框架。我目前正在尝试使用电影评论API制作一个电影评论应用程序

我能够成功地检索JSON，但无法提取数据

控制器代码：

constructor(public navCtrl: NavController, public http: Http) {
this.http.get('https://api.nytimes.com/svc/movies/v2/reviews/all.json?api-key=a96736504fda41f58b3af1ec5876d3b9')
  .map(res => res.json())
  .subscribe(data => {
    this.posts = data.results;
  });
}

HTML代码：

<ion-content>
  <ion-list>
    <ion-item ng-repeat = "post in posts">
      {{post.display_title}}
    </ion-item>
  </ion-list>
</ion-content>

{{post.display_title}

我得到了错误

无法读取未定义的属性“显示标题”

---

但是有一个字段用于显示标题。哪里出错了？

这是因为数据是异步检索的。加载DOM时，数据尚未返回，因此您的

posts

为空，您将无法定义

另外，使用

*ngFor

：

要解决此问题，请使用Elvis运算符

 <ion-content>
  <ion-list>
    <ion-item *ngFor= "let post of posts">
      {{post?.display_title}}
    </ion-item>
  </ion-list>
</ion-content>

---

正如@CozyAzure所说，在这一行：

{{ post.display_title }}

视图试图访问尚未设置的内容的

显示标题

（因为它是在异步方法就绪时设置的）。这就是为什么会出现以下错误：

无法读取未定义的属性“显示标题”

因此，首先，使用elvis运算符让angular知道，如果

post

为空，则它不应尝试读取

display\u title

属性：

<ion-content>
  <ion-list>
    <ion-item *ngFor= "let post of posts">
      {{post?.display_title}}
    </ion-item>
  </ion-list>
</ion-content>

{{post？.display_title}}

请注意，ngFor循环的正确sintax为

*ngFor=“让帖子发帖”>

而不是

*ngFor=“让帖子发帖”>

---

还请注意，您试图在视图中使用AngularJs（

ng repeat=“post in posts”

），但Ionic 2/3（或仅Ionic）构建在Angular之上，因此请参阅以查找有关如何执行for循环之类操作的更多信息。

仍然不起作用。它返回一个空列表。但是Elvis操作员帮助删除了错误。@SauravSircar使用开发工具检查api是否真的在检索数据。如果您的API返回空列表，则返回空列表。另外，您使用的是angular1还是angular2？如果其角度为2，则使用

ngFor

。它不是空列表。当我将“post？.display_title”更改为“posts”时，它会给出输出“[object object]、[object object]、[object object]…”您能否在控制台中检查

display_title

是否真的是

posts

的属性名？这就成功了！非常感谢你！在构造函数中启动

this.posts=[]

，然后执行

this.http.get

操作

<ion-content>
  <ion-list>
    <ion-item *ngFor= "let post of posts">
      {{post?.display_title}}
    </ion-item>
  </ion-list>
</ion-content>