Angular中使用*ngFor迭代表格数据的代码修正求助

参考数据结构 #

[
  {
    date: '23-09-2024',
    location: [
      {
        locationName: 'London',
        locationID: '12',
        ticketIds: [19299298,7383883,585885]
      },
      {
        locationName: 'USA',
        locationID: '11',
        ticketIds: [1224298,73855553,5555585]
      }
    ]
  },
  {
    date: '24-09-2024',
    location: [
      {
        locationName: 'London',
        locationID: '12',
        ticketIds: [19299298,7383883,585885]
      },
      {
        locationName: 'USA',
        locationID: '11',
        ticketIds: [124748898,7385444453,5555585]
      }
    ]
  }
]

预期表格结构说明 #

每行对应一个日期，布局规则：

• 第一列固定显示「Dates」
• 第二列显示具体日期值
• 后续每两列对应一个地点：分别展示地点名称、该地点的票量

当前代码的问题 #

1. 标签嵌套违规：在<th>内部嵌套<td>，不符合HTML表格规范，表头单元格与数据单元格不能互相嵌套。
2. 属性名不匹配：数据中地点名称的属性是locationName，但代码里用了loc.name，导致无法渲染名称。
3. 结构逻辑错误：用<th>循环渲染地点内容，混淆了表头与数据行的结构。

修正后的代码 #

<table border="1">
  <tr *ngFor="let dateItem of toRunData">
    <!-- 固定列：Dates -->
    <td>Dates</td>
    <!-- 当前日期列 -->
    <td>{{ dateItem.date }}</td>
    <!-- 循环渲染每个地点的名称和票量 -->
    <ng-container *ngFor="let loc of dateItem.location">
      <td>{{ loc.locationName }}</td>
      <td>{{ loc.ticketIds.length }}</td>
    </ng-container>
  </tr>
</table>

关键修改说明 #

1. 统一用<td>作为数据单元格，不再混用<th>（若需要独立表头可单独添加<thead>区块）。
2. 将loc.name修正为loc.locationName，匹配数据结构中的属性名。
3. 使用<ng-container>作为循环容器，避免生成多余DOM元素，同时保证每个地点对应两个单元格的结构正确。

内容的提问来源于stack exchange，提问作者rajk