Angular 6 - динамическое заполнение значений содержимого таблицы

Question

Я заполняю таблицу из некоторых данных json.

Вот код:

<table>
  <thead>
  <tr>
    <th *ngFor="let datakeys of listData[0] | keys">{{ datakeys }}</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let datavalues of listData | values">
    <td>{{ datavalues.userId }}</td>
    <td>{{ datavalues.id }}</td>
    <td>{{ datavalues.title }}</td>
    <td>{{ datavalues.body }}</td>
  </tr>
  </tbody>
</table>

Первый ngFor отобразит все заголовки таблицы.Данные хранятся в datakeys .

Второй ngFor содержит значения.

В данный момент вы можете видеть, что ключи на значениях значения данных жестко закодированы.

Когда мне нужно это сделать, нужно взять из datakeys , так что все готово, будет код.

Как я могу это сделатьэто?

Answer 1

Вы можете использовать другой ngFor точно так же, как вы использовали для заголовков.

   <tr *ngFor="let datavalues of listData | values">
      <td *ngFor="let key of datavalues | keys">
           {{ datavalues[key]}}
      </td>
   </tr>