动态从angular2中的json数据构建表

问题描述 投票:0回答:1

我无法绕过一个循环系统,我需要从json数据构建一个表。这是我到目前为止所做的(尝试了一些其他的东西,但我认为这说明了最好的方法)。

通过标题循环工作正常,它只是我无法工作的单元格。

这是我的虚拟数据:

    tableMockData = [
   {
     "header": "TH 1",
      "rows": [
          "TH1 - row1",
          "TH1 -row2",  
          "TH1 - row3", 
          "TH1 - row4" 
      ]
   },
   {
    "header": "TH 2",
     "rows": [
         "TH2 -row1",
         "TH2 - row2",   
         "TH2 - row3", 
         "TH2 - row4",
     ]
  },
  {
    "header": "TH 3",
     "rows": [
      "TH3 -row1",
      "TH3 - row2",  
      "TH3 - row3", 
      "TH3 - row4",
     ]
  },
  {
    "header": "TH 4",
     "rows": [
      "TH4 - row1",
      "TH4 - row2",  
      "TH4 - row3", 
      "TH4 - row4",
     ]
  }
]

这是我的基本循环作为起点:

 <tr *ngFor="let row of tableMockData; let i = index">
      <td>{{row.rows[i]}}</td>
  </tr>

这是我的结果:enter image description here

这是我期望的结果:enter image description here

有人能指出我正确的方向,我知道哪个细胞需要去哪里,但我根本无法绕过如何循环它。

谢谢 :)

更新:这是一个stackblitz示例:https://stackblitz.com/edit/angular-cdoqwb

json angular loops html-table
1个回答
0
投票

使用以下代码更新您的Html

<table>
 <tr>
    <th  *ngFor="let row of tableMockData; let i = index">{{row.header}} 
   </th>
</tr>
<tr  *ngFor="let row of tableMockData; let i = index">
 <td *ngFor="let row1 of row.rows">
   {{row1}}
 </td>
</tr>
</table>

您没有正确绑定您的JSON。

© www.soinside.com 2019 - 2024. All rights reserved.