javascript - 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}} 但它给了我一个错误:原始异常:TypeError:无法读取未定义的属性“数据” .

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

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

Answer 1

尝试在模板中使用安全导航 (Elvis) 运算符，例如 fruit: {{info?.data?.fruit}}。您可以找到更多关于安全运算符(operator)的信息here

这是必需的，因为您的服务正在返回 promise 。在 Controller 的 getData() 方法中，您使用该 Promise 并通过 .then() 设置 Controller 上的 info 属性。问题是在你的 promise 完全解决之前 View 就已经渲染了。