Функциональность модуля Angular2 для создания рядов элементов

Question

У меня возникают проблемы при воссоздании и представлении, как воссоздать следующий фрагмент ванильного кода Javascript в Angular2 (я просто набрал его на месте, поэтому не беспокойтесь о синтаксических или логических ошибках). Как видите, я перебираю массив продуктов, и если модуль итерации равен 4, я закрываю div с помощью класса 'row' и запускаю новый div с помощью класса row. Поэтому я могу добавить классы '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>

Сам работающий Плункр.