I am working with the code shown in my component.ts file.
{
Sheet1:
[
0:{Name: "foo", Age: "24", __rowNum__: 1},
1:{Name: "boo", Age: "14", __rowNum__: 2}
]
}
The data from above is stored in the this.tableData array.
To dynamically display table headers, I store all keys in an array.
this.tableHeaders= Object.keys(this.data['Sheet1'][0]);
The resulting tableHeaders array will have values like:
["Name", "Age"]
I then place all necessary data for the table in another array.
this.data = this.tableData['Sheet1'];Now, I aim to present this information in a table structure using the following setup:
<table>
<tr>
<th *ngFor="let header of tableHeaders">
{{header}} /* able to show 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
If someone could provide assistance, it would be greatly appreciated.