Angular 2不显示HTTP数据

Question

我正在使用Angular 2执行HTTP请求，但未显示结果。 我有以下服务：

getData() {
  return this.http.get(this.api)
    .toPromise()
    .then(response => response.json())
    .catch(this.handleError);
}

这是我的AppComponent ：

info: any;
error: any;

constructor(private appService: AppService) {}

getData() {
  this.appService
    .getData()
    .then(response => this.info = response)
    .catch(error => this.error = error);
}

ngOnInit() {
  this.getData();
}

在我的模板上，我正在调用{{info.fields.id}}但它给了我一个错误： ORIGINAL EXCEPTION: TypeError: Cannot read property 'data' of undefined 。

关于我在做什么错的任何提示吗？

我还创建了一个Plunker来重现此问题。

Answer 1

尝试在模板中使用安全导航（Elvis）运算符，例如fruit: {{info?.data?.fruit}} 。 您可以在此处找到有关安全操作员的更多信息

这是必需的，因为您的服务正在兑现承诺。 在控制器的getData（）方法中，您正在使用该诺言，并通过.then（）在控制器上设置info属性。 问题在于视图在您的诺言完全解决之前就已呈现。