在Angular项目开发中，我们经常会遇到需要将二维数组中的每个子数组渲染为独立表格的需求，比如后台返回的分组列表数据、多组统计结果等场景。这种需求的核心是利用Angular的模板指令正确遍历外层数组，再针对每个子数组渲染对应的表格结构。
基础数据准备
首先我们需要在组件的TS文件中定义好二维数组数据，这里以一个学生分组数据为例，每个子数组代表一个小组的学生信息：
// 组件TS文件
import { Component } from '@angular/core';
@Component({
selector: 'app-array-table',
templateUrl: './array-table.component.html',
styleUrls: ['./array-table.component.css']
})
export class ArrayTableComponent {
// 二维数组，外层每个元素是一个小组的学生列表
studentGroups: Array<Array<{id: number, name: string, score: number}>> = [
[
{ id: 1, name: '张三', score: 90 },
{ id: 2, name: '李四', score: 85 }
],
[
{ id: 3, name: '王五', score: 92 },
{ id: 4, name: '赵六', score: 88 },
{ id: 5, name: '孙七', score: 79 }
],
[
{ id: 6, name: '周八', score: 95 }
]
];
}
模板中遍历生成独立表格
核心实现逻辑是使用两层*ngFor指令，第一层遍历外层的二维数组，为每个子数组生成一个独立的<table>元素，第二层遍历子数组的内容，渲染表格的行和列。
完整模板代码
<!-- 组件HTML模板 -->
<div class="table-container">
<!-- 第一层遍历：遍历二维数组的每个子数组，生成独立表格 -->
<div class="single-table-wrap" *ngFor="let group of studentGroups; let groupIndex = index">
<h3>第 {{ groupIndex + 1 }} 组学生信息</h3>
<table border="1" cellpadding="8" cellspacing="0">
<thead>
<tr>
<th>序号</th>
<th>学生ID</th>
<th>学生姓名</th>
<th>考试成绩</th>
</tr>
</thead>
<tbody>
<!-- 第二层遍历：遍历当前子数组，渲染表格行 -->
<tr *ngFor="let student of group; let studentIndex = index">
<td>{{ studentIndex + 1 }}</td>
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.score }}</td>
</tr>
</tbody>
</table>
</div>
</div>
关键语法说明
- 第一层
*ngFor的let group of studentGroups用于遍历二维数组，每次循环得到的group就是一个子数组，每个group对应一个独立的<table>元素。 let groupIndex = index可以获取当前子数组在外层数组中的索引，方便给每个表格添加分组标识。- 第二层
*ngFor的let student of group用于遍历当前子数组的学生数据，渲染表格的每一行内容。
常见错误及规避方法
错误1：表格结构嵌套错误
很多开发者会误将第二层遍历写在外层<table>标签内部，导致多个子数组的内容渲染到同一个表格中，正确的做法是每个子数组对应一个完整的<table>标签结构，第一层遍历的范围要包含整个<table>元素。
错误2：数据绑定异常
如果子数组的元素是复杂对象，需要确保绑定的属性名和数据结构一致，比如上面的student.id、student.name要和TS中定义的对象属性完全匹配，否则会出现数据不显示的问题。
错误3：缺少trackBy优化
当二维数组数据量较大或者会频繁更新时，建议给*ngFor添加trackBy函数，提升渲染性能，避免不必要的DOM重建：
// 组件TS中添加trackBy函数
trackByGroupIndex(index: number, group: any) {
return index;
}
trackByStudentId(index: number, student: {id: number}) {
return student.id;
}
模板中对应修改为：
<div class="single-table-wrap" *ngFor="let group of studentGroups; trackBy: trackByGroupIndex">
<table border="1" cellpadding="8" cellspacing="0">
<tbody>
<tr *ngFor="let student of group; trackBy: trackByStudentId">
<!-- 表格内容 -->
</tr>
</tbody>
</table>
</div>
样式优化建议
可以通过CSS给每个独立表格添加间距，让页面展示更清晰：
/* 组件CSS文件 */
.table-container {
padding: 20px;
}
.single-table-wrap {
margin-bottom: 30px;
}
.single-table-wrap h3 {
margin-bottom: 10px;
color: #333;
}
table {
width: 100%;
max-width: 800px;
border-collapse: collapse;
}
th, td {
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #f5f5f5;
font-weight: bold;
}
按照上述方法实现，就可以在Angular中正确遍历二维数组，为每个子数组生成独立的表格，并且保证数据绑定正确、渲染性能良好。