用于创建元素行的 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>

自动工作Plunkr .