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>元素进行迭代，然后迭代＃34;行＆＃34;显示元素。假设您将阵列更改为：

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;
}

该功能的结果只会在视图中使用，不会修改您的＆＃34;结果＆＃34;变量

渲染表（2D阵列）N * M大小

1 个答案: