在 Angular2 中在 JSON 对象中显示嵌套数组的最佳方法是什么?

Question

让我们假设我的对象看起来像

   {
       firstName: 'John',
       lastName: 'Smith',
       dob: '12/12/1980'
    }

我可以很容易地像这样去

{{person.firstName}} 
{{person.lastName }} 
{{person.dob | date}}

但是我想显示我的服务器响应 JSON 对象中的嵌套数组 像这样

{
"firstName":"John",
"lastName": "Smith",
"dob": "12/12/1980",
 "cars":
    { 
      "name":"BMW", 
      "models":[ "320", "X3", "X5" ] 
    }
}

我怎么能显示它？ 如果我使用这个 {{person.cars.name}}，我会收到一个 TypeError "无法读取未定义的属性'名称'"。

Answer 1

我不太明白你的问题，但是：

如果要浏览嵌套对象，请使用：

{{person?.car?.name}}

因为也许有些人不会有车。

如果要将对象显示为/转储为 JSON 格式，请使用 json 管道：

{{ person | json }}

澄清?.运算符：

?.运算符允许您在示例中a null时不抛出错误：

a.b // Error shown
a?.b // No error

文档：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator

我确认在浏览对象属性时可以使用它：

a?.b?.c // Is allowed

引用自文档：

它非常适合长属性路径，例如 a?.b?.c?.d .

Answer 2

{{person|json}}会将完整的 json 对象输出到页面。要在显示的布局中查看它，请将其包装在如下所示的pre标记中：

<pre>{{person|json}}</pre>

如果 person.cars 属性存在，则它将按照您显示的方式显示。