Angular2 模数功能来创建元素行

Question

我在重新创建和想象如何在 Angular2 中重新创建以下原版 Javascript 代码时遇到了麻烦（我只是当场打出来的，所以不用担心语法或逻辑错误）。正如你所看到的，我正在循环一个产品数组，如果迭代模数为 4，那么我用“row”类关闭 div，并用一个 row 类开始一个新的 div。这样我就可以将“col-xs-3 col-sm-3 col-md-3 col-lg-3”类添加到产品中以使其响应。

<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。