如何创建一个 Angular 2+ *ngFor 在每个单元格中填充 table 记录？

Question

我正在尝试创建一个具有未定义行数和列数的响应式 table，其中每个单元格都填充了 Angular 2+ *ngFor.[=15 的记录出现=]

例如，如果我的数组有 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>

目前我的图片还没有格式化成table，我怎么能用解释风格的卓尔呢？

感谢大家。 G.

Answer 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 变得更复杂，可能有助于 angular 重用元素。（编辑：经过测试，是的，如果每个 ngFor 都有一个 trackBy，这会有点用，例如：如果您在 4 列和 3 列之间切换，它会在第 3 列的开头和结尾之间重新呈现带有 7 和 8 的 td 元素第二行，但重新使用具有 9 init 的元素，但 w/o trackBy 每次列更改时它都会重新呈现所有内容）

如何创建一个 Angular 2+ *ngFor 在每个单元格中填充 table 记录？

How to create an Angular 2+ *ngFor filled table with a record in every cell?

html

css

html-table

ngfor

angular