Question

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

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

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

我试图实现类似于下面显示。

{
  "data": {
    "usersDetails": [
      {
        "image": "../userimage.jpg",
        "projects": [
          {
            "project_id": "1",
            "name": "test_project",
            "status": "0"
          }
        ],
        "created_on": "1480935474",
        "name": "Test name",
        "id": "10",
        "username": "tester.user"
      }
    ]
  },
  "message": "OK",
  "status": 200
}

在组件中：

user = response.data.userDetails[0];

在HTML中

<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>

Answer 1

如果从服务器获取数据，则为异步调用

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>

如何在角度2中直接使用json响应加载到html中

1 个答案: