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}
    ]
}

我无法使用jSON数据动态显示表数据

1 个答案: