在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＆＃34;无法读取属性＆＃39; name＆＃39;未定义＆＃34;。

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

来自文档的Cit：

  

它与a?.b?.c?.d等长属性路径完美配合。

Answer 2

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

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

如果person.cars属性存在，那么它将显示为您显示的内容。