如何使用Angular的*ngFor创建表格并仅通过索引访问元素？

你可以通过两种方式实现和PHP示例等价的效果，核心是利用*ngFor的索引获取能力，或者提前将一维数组转换为二维数组：

方式一：直接在模板中使用索引计算（和PHP逻辑完全对应） #

首先在组件的.ts文件中定义数据源和行列数：

// 组件.ts文件
items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"];
rowCount = 2; // 对应PHP中的循环次数2
colCount = 3; // 对应PHP中的循环次数3

然后在.html模板中，通过生成固定长度的空数组来驱动循环，同时获取索引：

<!-- 组件.html文件 -->
<table>
  <!-- 循环生成行，i为行索引 -->
  <tr *ngFor="let _ of Array(rowCount); let i = index">
    <!-- 循环生成列，j为列索引 -->
    <td *ngFor="let __ of Array(colCount); let j = index">
      <!-- 用和PHP一致的下标计算逻辑获取元素，空值兜底避免报错 -->
      {{ items[i * colCount + j] || '' }}
    </td>
  </tr>
</table>

逻辑说明： #

• Array(rowCount)会创建一个长度为rowCount的空数组，*ngFor会循环对应次数，let i = index拿到当前行的索引（对应PHP中的$i）。
• 列循环同理，let j = index拿到列索引（对应PHP中的$j）。
• 下标计算i * colCount + j和PHP代码完全一致，直接从一维数组中取对应元素。

方式二：提前将一维数组转为二维数组（更清晰的模板结构） #

如果希望模板逻辑更简洁，可以在组件中将一维数组转换为二维数组，再用嵌套*ngFor循环：

// 组件.ts文件
items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"];
colCount = 3;

// 通过getter动态生成二维数组
get twoDimensionalItems(): string[][] {
  const result: string[][] = [];
  // 按列数拆分一维数组
  for (let i = 0; i < this.items.length; i += this.colCount) {
    result.push(this.items.slice(i, i + this.colCount));
  }
  // 若需要补全到指定行数（比如数组长度不足时），可以添加以下逻辑
  const targetRowCount = 2;
  while (result.length < targetRowCount) {
    result.push(new Array(this.colCount).fill(''));
  }
  return result;
}

模板代码会更直观：

<!-- 组件.html文件 -->
<table>
  <tr *ngFor="let row of twoDimensionalItems">
    <td *ngFor="let item of row">
      {{ item }}
    </td>
  </tr>
</table>

逻辑说明： #

• 组件中通过slice方法将一维数组按列数拆分为二维数组，每行对应一个子数组。
• 模板中只需嵌套循环二维数组，无需在模板中做下标计算，更符合Angular的组件职责分离原则。

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