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？

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>

有关演示，请参见this stackblitz。

Answer 2

Javascript：

numMatrix = [
  [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 numArray of numMatrix">
      <td *ngFor="let num of numArray">
        {{num}}
      </td>
    </tr>
  </tbody>
</table>

在角度为

2 个答案: