渲染表（二维数组）N*M 大小

Question

我想呈现给定数组的表格，例如let results=[[1,2,3],[4,5,6],[7,8,9]] 看起来像：

1 2 3
4 5 6
7 8 9

但不知道如何使用这样的模板正确设置行数

<table>
  <ng-container *ngFor="let result of results">
    <tr>
      <td>{{result}}</td>
    </tr>
  </ng-container>
</table>

事实上，我得到了只有一排的桌子。如何管理这种情况下的行数？由于缺乏 Angular2+ 的经验，这可能看起来微不足道，但很难管理。 谢谢！

Answer 1

对于这样的情况，我喜欢使用嵌套数组并在顶部数组上作为<tr> 元素进行迭代，然后在该“行”上进行迭代以显示元素。 假设您将数组更改为：

let results=[[1,2,3],[4,5,6],[7,8,9]]

你的看法是：

<table>
  <tr *ngFor="let row of results">
    <td *ngFor="let item of row">{{item}}</td>
  </tr>  
</table>

如果您无法将数组转换为嵌套数组，您可以创建一个函数来执行此操作并在模板中调用它，如下所示：

<tr *ngFor="let row of transformToNestedArray(results, 3)">

并且这个函数将在您的代码中定义为：

transformToNestedArray = (arr, cols) => {
  let newArray = [];
    while(arr.length){
      newArray.push(arr.splice(0, cols))
  }
  return newArray;
}

该函数的结果只会在视图中使用，不会修改您的“结果”变量。