angular - 以角度显示 5x5 表格中的数字数组

Question

我有一个长度为 25 个数字的数字数组。我想在表格中显示这个数组，但要显示它，这样我就不会超过 5 行和 5 列来显示所有 25 个数字。我不想将表格编码为 25 个单元格，但我想知道是否有一种动态方式可以告诉表格创建这么多行和列。

这就是我所拥有的：
numArray =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];

html:

<table>
    <tbody>
      <tr *ngFor="let num of numArray; let i=index">
        <td>{{numArray}}</td>
      </tr>
    </tbody>
  </table>

我知道这只会显示整个数组 25 次，但是我如何指定 5x5 表来显示我的 numArray？

标签： angular

Answer 1

你可以用两个ngFor循环来做到这一点：

<table>
  <tbody>
    <tr *ngFor="let row of [0,1,2,3,4]">
      <td *ngFor="let col of [0,1,2,3,4]">
        {{ numArray[5 * row + col] }}
      </td>
    </tr>
  </tbody>
</table>

请参阅此 stackblitz以获取演示。