I need to organize data in a table using <th> tags for alignment purposes. Currently, I am utilizing the ng-zorro table, but standard HTML tags can also be used.
The data obtained from the server (via C# web API) is structured like this:
[
{
"code":"0001",
"commissionId":"something",
"commissionType":0,
"description":"Some Description",
"registrationList":[
{
"activityCode":"01.6",
"activityDescription":"Desc1",
"activityId":"ActivityId1",
"minuteWorked":120
}
// ...
// Additional data may follow the same format
]
}
// ...
// Additional data may follow the same format
]
In the initial array, there can be multiple commission entries, each containing various elements within the registrationList.
To achieve this, I aim to:
- Show the commission code in the first column, which remains fixed (I know how to do this)
- Display the registration list in the table data, matching the activityCode found in the table header (this part I am uncertain about)
Table Preview
I attempted to utilize *ngIf and *ngFor to iterate through the initial array and then further loop through the registrationList. However, this approach was not successful.
The <th> values are generated based on looping through an activityList.Here's a snippet of my code that reflects this structure:
<thead>
<tr>
<th>Commission</th>
<th *ngFor="let activity of activityList" class="text-center">{{activity.code}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of serverData index as i">
<td nzLeft>{{data?.code}} - {{data?.description}}</td>
<ng-container *ngFor="let activity of activityList">
<ng-container *ngFor="let r of serverData.registrationList">
<td *ngIf="r.activityCode == activity?.code; else noData">{{data.description}} - {{r.activityCode}}
<td #noData> no data </td>
</ng-container>
</ng-container>
</tr>
</tbody>
If anyone has insights or suggestions on how to address this issue, your guidance would be greatly appreciated. Thank you!