Я не могу отображать данные таблицы динамически, используя данные jSON

Question

У меня есть следующий код в component.ts

{
  Sheet1:
    [
      0:{Name: "foo", Age: "24", __rowNum__: 1},
      1:{Name: "boo", Age: "14", __rowNum__: 2}
    ]
}

Эти данные хранятся в массиве this.tableData

Я помещаю все ключи в один массив, так как мне нужно динамически отображать заголовки таблицы

this.tableHeaders= Object.keys(this.data['Sheet1'][0]);

Мой вывод tableHeaders будет выглядеть следующим образом

["Name", "Age"]

И я сохранил все данные, которые мне нужны для отображения в таблице, в другом массиве

this.data = this.tableData['Sheet1'];

Теперь я хочу отобразить все эти данные в таблице, которая работает следующим образом

<table>
   <tr>
      <th *ngFor="let header of tableHeaders">
        {{header}}                         //able to display headers
      </th>
   </tr>
   <tr *ngFor="let header of importedData">
                <td *ngFor="let item of data">{{header[item.value]}}</td>
            </tr> //here I want to display table data based on header value
 </table

Может кто-нибудь помочь, пожалуйста?

Answer 1

Попробуйте это:

<table>
    <tr>
       <th *ngFor="let header of tableHeaders">
           | {{header}}
       </th>
    </tr>
        <tr *ngFor="let row of data">
            <td *ngFor="let key of tableHeaders">{{row[key]}}</td>
        </tr>
</table>

Это сделает работу!

EDIT: будьте осторожны, ваш код

{
    Sheet1:
        [
            0:{Name: "foo", Age: "24", __rowNum__: 1},
            1:{Name: "boo", Age: "14", __rowNum__: 2}
    ]
}

недействительно. Вы должны сначала удалить 0 и 1 перед этими вложенными объектами в массиве Sheet1. Это действительный объект:

{
    Sheet1:
        [
            {Name: "foo", Age: "24", __rowNum__: 1},
            {Name: "boo", Age: "14", __rowNum__: 2}
    ]
}