從angular2中的json數據動態構建表

Question

我無法將我的頭繞在循環系統上，我需要根據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>

這是我的結果：

這是我想要的結果：

有人能指出我正確的方向嗎，我知道細胞需要走到哪里，但我根本無法繞過如何繞過它。

謝謝 ：）

更新：這是一個stackblitz示例： https ：//stackblitz.com/edit/angular-cdoqwb

Answer 1

使用以下代碼更新您的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。