如何在angular 2中直接使用json响应加载html

我刚开始研究angular 2并探索它的各种组件。我正在从服务器获取以JSON格式显示在html上的数据响应。在angular 1.x中，我们可以直接将json对象保存在变量中，并使用“.”运算符直接在html上使用它，而无需定义所有变量。我的问题是:

我们可以在组件中的任何变量中保存通过ajax从服务器接收的json对象吗

如果是，那么我们如何在HTML上使用它而不定义json响应中可用的每个变量

我正在尝试实现类似于下面所示的功能

{
“数据”：{
“用户详细信息”：[
{
“image”：“./userimage.jpg”，
“项目”：[
{
“项目id”：“1”，
“名称”：“测试项目”，
“状态”：“0”
}
],
“创建日期”：“1480935474”，
“名称”：“测试名称”，
“id”：“10”，
“用户名”：“tester.user”
}
]
},
“消息”：“确定”，
“地位”：200
}

组件中：

user = response.data.userDetails[0];

HTML格式的

用户名
{{user.name}
用户图像
用户用户名
{{user.username}
...

如果从服务器获取数据，则它是一个异步调用，并且

user.name

引发异常，因为Angular在数据可用之前尝试绑定。您可以使用安全导航操作符

？。

来防止该异常

<tr>
  <td>User name</td>
  <td>{{user?.name}}</td>
</tr>
<tr>
  <td>User image</td>
  <td><img src="{{user?.image}}"/></td>
</tr>
<tr>
  <td>User username</td>
  <td>{{user?.username}}</td>
</tr>
<tr>
...
</tr>

用户名
{{user？.name}
用户图像
用户用户名
{{user？.username}
...

谢谢你的回答。这东西有用。伟大的这是实现这一目标的正确方法，还是我们可以使用另一种方法来获得完美的结果？您也可以使用

，这样，在数据被

！=空

。这取决于什么对您的用例更方便。您还可以使用解析器或防护来阻止导航到路由（如果适用），直到异步调用完成！谢谢你的时间和回答。