如何在 Angular 中正确遍历并显示二维数组中的每个子数组（避免重复渲染）

本文介绍在 angular 中使用 *ngfor 遍历二维字符串数组时，如何精准匹配索引、避免嵌套循环导致的数据重复渲染，实现每个子数组独立生成一张表格的正确写法。

在 Angular 模板中处理二维数组（如 test: String[][]）时，一个常见误区是使用多层嵌套 *ngFor 并依赖 *ngIf 进行索引过滤（如 h === i），这不仅逻辑冗余，更会导致重复渲染——因为内层循环会遍历整个二维结构，每次外层索引匹配时都重新扫描所有行，造成数据成倍输出（如 Test1 被渲染 2 次、Test3 渲染 3 次等）。

✅ 正确做法是：*利用外层 `ngFor的索引i直接访问test[i]`**，跳过不必要的嵌套遍历。这样既语义清晰，又性能高效。

以下是推荐的实现方式：

   
{{ header }}
      
     
       
{{ header }}
     
     
       
         
{{ item }}
       
     
   
 

配套 typescript 数据结构保持简洁明确：

headers = ['Header1', 'Header2']; test = [   ['Test1', 'Test2'],   ['Test3', 'Test4', 'Test5'] ];

⚠️ 注意事项：

• 确保 headers.Length === test.length，否则 test[i] 可能为 undefined，导致模板报错（可加 *ngIf=”test[i]” 做防御性渲染）；
• 避免在模板中执行复杂计算或方法调用（如 getRows(i)），以免触发频繁变更检测；
• 若需动态增删子数组，建议使用 trackBy 优化性能，例如
  。

  总结：二维数组渲染的核心在于“扁平化索引映射”——用外层循环索引直接定位内层数组，而非暴力遍历+条件过滤。这一原则不仅适用于表格，也适用于卡片列表、分组折叠面板等常见场景。