我无法使用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>

这样就可以了！

编辑：当心您的代码

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

无效。 必须先在Sheet1数组中的那些嵌套对象之前删除0和1。 这是有效的对象：

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