解析json时出错

时间:2016-09-20 11:00:36

标签: angular typescript

我在解析json数据时遇到了一些错误。这是json:

    [{
    "name": "TqgQdaaqQU",
    "location": "YEyFMkCiAjGRsxa",
    "type_id": 68,
    "gos_prinad_id": 64,
    "disloc_country_id": 95,
    "adm_terr_id": 57,
    "lat": 142.48033105609792,
    "lon": 90.31768510181121,
    "alt": 483,
    "hops": [{
        "hop_type": "KZMzTuUnNw",
        "id_sl_hop": 928,
        "hop_text": "GZOvhipRpTgwPDkeGKrl"
    }]
}]

这是我模板的一部分。 <div>块的UPD

    <tbody>
       <tr *ngFor='let list of lists'>
          <td>{{ list.name }}</td>
          <td>{{ list.location }}</td>
          <td>{{ list.type_id }}</td>
          <td>смотр.</td>
          <td>{{ list.lat }}</td>
          <td>{{ list.lon }}</td>
          <td>{{ list.alt }}</td>
       </tr>
       <tr>
          <td colspan="6"></td>
          <td colspan="2">Страниц: из </td>
          <td colspan="2">Просмотр: из </td>
       </tr>
       <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
       </tr>
    </tbody>
   </table>
   <div>
      <br>
      <table>
         <thead>
              <tr>
                  <th>Тип ХОП</th>
                  <th>Текст ХОП</th>
                  <th>Номер ХОП</th>
               </tr>
          </thead>
          <tbody>
            <tr *ngFor="let new_var of list.hops">
                <td>{{ new_var.hop_type }}</td>
                <td>{{ new_var.id_sl_hop }}</td>
                <td>{{ new_var.hop_text }}</td>
             </tr>
           </tbody>
          </table>
   </div>

使用{{list.name}}等我没有问题,但{{new_var.hop_type}}我有错误TypeError: Cannot read property 'hops' of undefined,请帮忙!

1 个答案:

答案 0 :(得分:1)

您收到该错误,因为变量list是一个本地模板变量,由于关键字<tr>,它只存在于您的第一个let代码中。这是解决您问题的方法:

<table>
<tbody *ngFor='let list of lists'>
   <tr>
      <td>{{ list.name }}</td>
      <td>{{ list.location }}</td>
      <td>{{ list.type_id }}</td>
      <td>смотр.</td>
      <td>{{ list.lat }}</td>
      <td>{{ list.lon }}</td>
      <td>{{ list.alt }}</td>
   </tr>
   <tr>
      <td colspan="6"></td>
      <td colspan="2">Страниц: из </td>
      <td colspan="2">Просмотр: из </td>
   </tr>
   <tr *ngFor="let new_var of list.hops">
      <td>{{ new_var.hop_type }}</td>
      <td>{{ new_var.id_sl_hop }}</td>
      <td>{{ new_var.hop_text }}</td>
   </tr>
</tbody>
</table>

这样,您可以在第二次list次迭代中访问变量*ngFor,并且您可以正确显示所有数据。