以通用方式显示来自 api 的对象答案

【问题标题】：Display objects which come from api in a generic way以通用方式显示来自 api 的对象
【发布时间】：2017-10-11 21:59:18
【问题描述】：

有没有一种很好的“通用”方法从该方法返回object：

getItems(){
    this.itemService.getAllWithPaging(this.params)
      .subscribe(res => {
        this.itemsAndPageableInfo = res;
      });
  }

然后以一种不错的方式显示sub objects？

我的response 看起来像：

当我尝试显示.number 时出现错误，这是undefined。 itemsAndPageableInfo 声明如下：itemsAndPageableInfo : any;。所以这可能是object 等，但我没有定义sub objects 和其他属性。有没有办法不定义所有这些sub objects 和显示或使用sub object，进一步属性？

当然，我不想在显示或使用它之前定义所有这些sub objects 和其他属性。

【问题讨论】：

标签： angular httpclient response

【解决方案1】：

您可以通过列出您的属性来加载 html 中的子属性

{{itemsAndPageableInfo?.totalPages}}

您需要安全导航运算符?，这样您的代码在等待 http 请求完成时不会引发错误（因为加载时未定义 itemsAndPageableInfo）

安全导航操作员文档 - https://angular.io/guide/template-syntax#safe-navigation-operator

【讨论】：

这是完美的答案。非常感谢！

【解决方案2】：

尝试将*ngIf="itemsAndPageableInfo" 添加到要显示数据的 html 元素中。

【讨论】：

它将如何帮助我？ itemsAndPageableInfo 在那里，但我无法显示它们的属性
如果itemsAndPageableInfo在DOM被渲染之前没有被初始化，你会得到一个错误itemsAndPageableInfo.anyProperty是undefined。
是的，我知道，那么如何预防呢？
@bielas Andresson 说您可以将*ngIf="itemsAndPageableInfo" 添加到包装{{itemsAndPageableInfo.anyProperty}} 的元素（例如<span *ngIf="itemsAndPageableInfo">{{itemsAndPageableInfo.anyProperty}}</span>），这样子属性在itemsAndPageableInfo 之前不会尝试渲染已定义/加载。这是避免这些类型错误的另一种常用技术。在我发布的文档中，在安全导航运算符下方，您可以看到此实现。