Question

我正在尝试创建一个具有不确定行和列数的响应表，其中每个单元格都记录了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。

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：为trackImage的{{1}}添加了NgForOf函数，如果UI变得更加复杂，则可能有助于角度重用元素。（编辑：已测试，是的，如果您对每个ngFor都有一个trackBy，则此方法有些起作用，例如：如果您在4列和3列之间切换，则会在第3列的开头和末尾之间重新渲染其中包含7或8的td元素。第二行，但通过9 init重用该元素，但没有trackBy每次列更改时都重新呈现所有内容）

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

1 个答案: