Angular：如何根据对象数组正确渲染3行的目标表格？

需求 #

渲染表头为John、Jane、Mike的表格，仅展示3行数据，每行对应各用户entries数组的同位置值（无对应值时显示空）。

现有数据源 #

objects = [
    {
      name: 'John',
      age: {
        id: 'asd',
        entries: [
          { secondName: 'Max', value: 'A' },
          { secondName: 'Maciej', value: 'B' },
          { secondName: 'Wini', value: 'C' },
        ],
      },
    },
    {
      name: 'Jane',
      age: {
        id: 'bsd',
        entries: [
          { secondName: 'Krzys', value: 'D' },
          { secondName: 'Kamil', value: 'E' },
          { secondName: 'Mirek', value: 'F' },
        ],
      },
    },
    {
      name: 'Mike',
      age: {
        id: 'gef',
        entries: [
          { secondName: 'Jacuka', value: 'G' },
          { secondName: 'Ziomek', value: 'I' },
        ],
      },
    },
  ];

当前代码问题 #

原有代码中getAllEntries()会收集所有唯一的value值（共8个），导致循环生成8行表格，不符合仅3行的需求；同时模板内层嵌套ng-container和td的逻辑会生成多余单元格，结构混乱。

修正方案 #

1. 组件类添加行数计算逻辑 #

添加一个计算属性，获取所有用户entries数组的最大长度，以此确定表格行数：

export class App {    
  objects = [...]; // 你的数据源

  get maxRows(): number {
    return Math.max(...this.objects.map(obj => obj.age.entries.length));
  }
}

2. 修正模板逻辑 #

移除错误的getAllEntries()循环，改为按索引遍历每行，直接取对应位置的value值：

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
  <table border="1"> <!-- 可选添加边框方便查看结构 -->
  <thead>
    <tr>
      <th *ngFor="let obj of objects">{{ obj.name }}</th>
    </tr>
  </thead>
  <tbody>
    <!-- 按最大行数生成行，通过索引i获取对应位置的entry -->
    <tr *ngFor="let _ of Array(maxRows).fill(0); let i = index">
      <td *ngFor="let obj of objects">
        {{ obj.age.entries[i]?.value || '' }}
      </td>
    </tr>
  </tbody>
</table>
  `,
})

修正说明 #

• 用maxRows动态计算表格行数，适配数据源中entries长度变化的情况
• 利用索引i直接定位每个用户对应行的entry，避免多余的循环判断
• 使用安全导航操作符?.防止因entries[i]不存在导致的空指针错误，无数据时显示空字符串
• 移除内层嵌套的ng-container和多余td，保证表格结构正确

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