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

Question

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

Это достаточно легко сделать в ванили и JQuery, но в Угловом я верю, что вы не можете иметь, если условие не на элементе, так что я не могу закрыть строку 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.