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}}。您可以找到有关安全操作员here

的更多信息

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

Angular 2不显示来自HTTP的数据

1 个答案: