Angular如何仅用单个*ngFor优雅实现两行数据表格

你当前的写法逻辑完全符合需求，对长度仅12的月份数组做两次遍历几乎没有性能损耗，本身可读性已经很高。如果想要精简代码、仅使用1个*ngFor实现，不需要调整现有maandverdeling的数组结构。

你之前考虑的「将month值作为hc的键」的方案不推荐：这种结构下你依然需要两次遍历（一次取键做表头，一次取值做数据行），还会丢失数组天然的顺序确定性，后续要新增月份维度的其他字段时扩展性很差。

由于标准table的两个<tr>是平级的兄弟节点，单个ngFor默认只能给当前宿主位置生成节点，没法直接同时给两个平级行填充单元格，要实现单ngFor的效果，可以通过模板复用的方式实现，只写一次遍历逻辑：

<table>
  <tr>
    <ng-container *ngTemplateOutlet="rowTpl; context: {type: 'month'}"></ng-container>
  </tr>
  <tr>
    <ng-container *ngTemplateOutlet="rowTpl; context: {type: 'hc'}"></ng-container>
  </tr>

  <!-- 仅此处写1次*ngFor，供两行复用 -->
  <ng-template #rowTpl let-type="type">
    <th *ngFor="let verdeling of maandverdeling">
      {{ type === 'month' ? verdeling.month : verdeling.hc }}
    </th>
  </ng-template>
</table>

这种写法整个模板里只出现1次*ngFor，没有破坏table的语义结构，后续如果要新增第三行（比如展示其他指标），只需要多写一个<tr>调用同一个模板即可，不用重复写遍历逻辑。

如果你的项目没有强制要求必须单ngFor，更推荐保留你原本的写法——直接在两个内分别写ngFor，逻辑直白没有额外嵌套，任何接手的开发都能一眼看懂结构，维护成本最低。

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