如何创建一个 Angular 2+ *ngFor 填充表，每个单元格都有一条记录？答案

【问题标题】：How to create an Angular 2+ *ngFor filled table with a record in every cell?如何创建一个 Angular 2+ *ngFor 填充表，每个单元格都有一条记录？
【发布时间】：2018-12-14 02:00:44
【问题描述】：

我正在尝试创建一个具有未定义行数和列数的响应式表，其中每个单元格都填充有 Angular 2+ *ngFor 的记录。

例如，如果我的数组有 9 条记录，而我的页面大小每行仅包含 4 条，我想要 3 行 4 列并按以下顺序：

| 1 | 2 | 3 | 4 |

| 5 | 6 | 7 | 8 |

| 9 |

在这种情况下，我的数组类似于：

imgList = [
    {name: '1', path: '/images/first/'},
    {name: '2', path: '/images/second/'},
    {name: '3', path: '/images/third/'},
    {name: '4', path: '/images/etc/'},
    {name: '5', path: '/images/etc/'},
    {name: '6', path: '/images/etc/'},
    {name: '7', path: '/images/etc/'},
    {name: '8', path: '/images/etc/'},
    {name: '9', path: '/images/etc/'}
];

html 是：

<div class="row">
  <div class="col-md-8">
    <div *ngFor="let image of imgList">
      {{image.name}}
    </div>
  </div>
</div>

现在我的图像没有在表格中格式化，我怎样才能获得具有解释风格的卓尔人？

谢谢大家。 G.

【问题讨论】：

您能否发布您的代码，以便我们从这里为您提供帮助？
当然，我修改了我的问题。

标签： html css angular html-table ngfor

【解决方案1】：

您需要将数组分割成行（二维数组）的逻辑。

https://stackblitz.com/edit/record-in-every-cell?file=src/app/app.component.ts

更新： https://stackblitz.com/edit/record-in-every-cell-update?file=src%2Fapp%2Fapp.component.html

更新 2：为NgForOf 的ngForTrackBy 添加了trackImage 函数，如果UI 变得更复杂，可能有助于角度重用元素。（编辑：经过测试，是的，如果您对每个 ngFor 都有一个 trackBy，这会有点用，例如：如果您在 4 列和 3 列之间切换，它会在第 3 列的开头和结尾之间重新渲染 td 元素，其中包含 7 和 8第二行，但使用 9 init 重新使用元素，但没有 trackBy 每次列更改时都会重新渲染所有内容）

【讨论】：

天啊，这太简单了，太干净了！非常感谢，真的！