用于创建元素行的 Angular2 模数功能

Question

我无法重新创建和想象如何在 Angular2 中重新创建以下一段普通的 Javascript 代码（我只是当场打出来的，所以不要担心语法或逻辑错误）。如您所见，我正在遍历一系列产品，如果迭代模数为 4，则我用 class 'row' 关闭 div 并开始一个新的 div class 行。这样我就可以在产品上添加 'col-xs-3 col-sm-3 col-md-3 col-lg-3' classes 以使其响应。

<div class='row'>
    <script>
        var html = '';
        for(let i = 0; i < products.length; i++) {
            html += '<div class=`product`>dom code in hhere</div>';
            if(i % 4 === 0) {
                html += '</div><div class=`row`>'
            }
        }
    </script>
<div>

这在 Vanilla 和 jQuery 中很容易做到，但在 Angular 中我相信你不能在元素上没有 if 子句所以我不能关闭行 div 和开始一个新的。到目前为止，这是我的代码：

<div class='row'>
        <div *ngFor='let product of products; let i = index' class='col-xs-1 col-sm-2 col-md-3 col-lg-3'>
            <div class='product'>
                <div class='image'>
                    <img [src]="product.image" />
                </div>
                <div class='info'>
                    <h4 class='title'>{{ product.name }}</h4>
                </div>
            </div>
        </div>
    </div>

因此，如您所见，我想关闭每四个产品上的父“”元素并开始一个新行。我考虑过使用管道，但我仍然想不出如何正确使用它。

有人可以帮我吗？谢谢

Answer 1

我将展开我的评论，这真的很简单，您应该在将数据发送到模板之前对其进行操作：

groupProductList() {
  for(let i = 1; i < 100; i = i + 4) {
    let group = this.productList.slice(i, i + 4);
    this.productListGrouped.push(group);
  }

然后在模板中：

<div class="row" *ngFor="let group of productListGrouped; let i = index">
  <div class="col" *ngFor="let product of productListGrouped[i]">
    {{ product.id }}
    {{ product.name }}
  </div>
</div>

Se 工作 Plunkr.

用于创建元素行的 Angular2 模数功能

Angular2 modulus functionality to create rows of elements

angular

modulus