Динамическая сборка таблицы из данных json в angular2

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>

Это мой результат:

Это мой желаемый результат:

Может кто-то указать мне в правильном направлении, я знаю, какая клетка должна идти куда, но япросто не могу обернуть голову, как пройти через это.

Спасибо :)

Обновление: вот пример стекаблица: 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.