如何使用*ngFor创建正确的Angular HTML表格？多数组列对齐实现

现有代码情况 #

Component.ts 数据定义 #

studentName=['Jhon','Johanne','Nadia'];
studentAge=[16,15,16];
studentScore=[10,7,9];

注：数组长度会随ag-grid数据动态增减，以上为简化示例。

当前错误的模板实现（component.html） #

<ng-template #studentInformationTemplate>
...
<div class= "table">
   <table>
       <thead>
           <tr>
               <th> Student Name </th>
               <th> Student Age  </th>
               <th> Student Score </th>
           </tr>
       </thead>
       <tbody>
           <tr *ngFor= "let name of studentName"
               <td> {{ name }} </td>
           </tr>
           <tr *ngFor= "let age of studentAge"
               <td> {{ age}} </td>
           </tr>
           <tr *ngFor= "let score of studentScore"
               <td> {{ score}} </td>
           </tr>
       </tbody>
   </table>
</div>
...
</ng-template>

问题描述 #

当前模板渲染后，每个数组的内容会单独占据一行，不符合预期。需要实现每行对应一个学生的姓名、年龄、分数，即每个数组对应表格的一列。

两种解决方案 #

方案一：重构为对象数组（推荐） #

在组件中将三个数组合并为包含完整学生信息的对象数组，数据结构更清晰，便于后续维护。

修改Component.ts：

// 在组件类中定义合并后的学生数组
students = this.studentName.map((name, index) => ({
  name: name,
  age: this.studentAge[index],
  score: this.studentScore[index]
}));

修改component.html模板：

<ng-template #studentInformationTemplate>
...
<div class= "table">
   <table>
       <thead>
           <tr>
               <th> Student Name </th>
               <th> Student Age  </th>
               <th> Student Score </th>
           </tr>
       </thead>
       <tbody>
           <tr *ngFor="let student of students">
               <td>{{ student.name }}</td>
               <td>{{ student.age }}</td>
               <td>{{ student.score }}</td>
           </tr>
       </tbody>
   </table>
</div>
...
</ng-template>

方案二：模板中直接用索引遍历 #

如果不想修改组件的数据结构，可以通过遍历其中一个数组获取索引，再用索引访问另外两个数组的对应元素。

修改component.html模板：

<ng-template #studentInformationTemplate>
...
<div class= "table">
   <table>
       <thead>
           <tr>
               <th> Student Name </th>
               <th> Student Age  </th>
               <th> Student Score </th>
           </tr>
       </thead>
       <tbody>
           <!-- 遍历姓名数组，同时获取索引 -->
           <tr *ngFor="let name of studentName; let i = index">
               <td>{{ name }}</td>
               <td>{{ studentAge[i] }}</td>
               <td>{{ studentScore[i] }}</td>
           </tr>
       </tbody>
   </table>
</div>
...
</ng-template>

方案对比 #

• 方案一：数据结构更符合前端开发的常规模式，后续扩展字段或修改数据逻辑更方便，推荐使用。
• 方案二：无需修改组件数据，适合快速调整场景，但可读性和可维护性不如方案一。

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