Как добавить строку после каждых 3 столбцов в угловых

Question

То, что я пытаюсь сделать, это добавить строку div после каждых 3 столбцов div

Пример Требуется вывод:

<div class="row">
     <div class="col-md-6"></div>
     <div class="col-md-6"></div>
     <div class="col-md-6"></div>
</div>

У меня есть набор продуктов, которые я вот так рисую

<div class="row" *ngFor="let p of relatedProperties;let i = index">
    <div class="col-md-6"  *ngIf="relatedProperties[i].title !== undefined">{{ relatedProperties[i].title }}</div>
    <div class="col-md-6" *ngIf="relatedProperties[i].title !== undefined">{{ relatedProperties[i].title }}</div>
    <div class="col-md-6" *ngIf="relatedProperties[i].title !== undefined">{{ relatedProperties[i].title }}</div>
  </div>

Но проблема в том, что каждая моя строка печатает один и тот же заголовок на одной итерации и второй на следующей итерации

Токовый выход

<div class="row">
     <div class="col-md-6">Title1</div>
     <div class="col-md-6">Title1</div>
     <div class="col-md-6">Title1</div>
</div>

<div class="row">
         <div class="col-md-6">Title2</div>
         <div class="col-md-6">Title2</div>
         <div class="col-md-6">Title2</div>
</div>

<div class="row">
             <div class="col-md-6">Title3</div>
             <div class="col-md-6">Title3</div>
             <div class="col-md-6">Title3</div>
</div>

Желаемый выход

<div class="row">
         <div class="col-md-6">Title1</div>
         <div class="col-md-6">Title2</div>
         <div class="col-md-6">Title3</div>
    </div>

    <div class="row">
             <div class="col-md-6">Title4</div>
             <div class="col-md-6">Title5</div>
             <div class="col-md-6">Title6</div>
    </div>

    <div class="row">
                 <div class="col-md-6">Title7</div>
                 <div class="col-md-6">Title8</div>
                 <div class="col-md-6">Title9</div>
    </div>

Answer 1

Если вы разбиваете свой массив на подмассивы с всегда 3 титрами, то вы можете легко перебрать этот массив в своем шаблоне.

https://ng -run.com / edit / zZsztdvTOTpzbUC5Buuj? Open = app% 2Fapp.component.ts

html компонента

<div class="row" *ngFor="let row of newTitleArr; let i = index">
    <div class="col" *ngFor="let col of newTitleArr[i]">{{ col.title }}</div>
</div>

компонент ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  titleArr = [
    { title: 'title1' },
    { title: 'title2' },
    { title: 'title3' },
    { title: 'title4' },
    { title: 'title5' },
    { title: 'title6' },
    { title: 'title7' },
    { title: 'title8' },
    { title: 'title9' },
    { title: 'title10' },
    { title: 'title11' },
    { title: 'title12' },
    { title: 'title13' },
  ];

  newTitleArr:any[];

  ngOnInit() {
     this.newTitleArr = this.splitArr(this.titleArr, 3)
  }

  splitArr(arr, size) {
     let newArr = [];
     for(let i = 0; i< arr.length; i += size) {
       newArr.push(arr.slice(i, i+size));
     }
     return newArr;
  }
}

Answer 2

Может быть, это работает, но я не уверен

<ng-container *ngFor="let p of relatedProperties; let i = index">
   <div class="row" *ngIf="(i + 1) / 3 === 1">
      <div class="col-md-6"  *ngIf="relatedProperties[i - 2].title != null">{{ relatedProperties[i].title }}</div>
      <div class="col-md-6"  *ngIf="relatedProperties[i - 1].title != null">{{ relatedProperties[i].title }}</div>
      <div class="col-md-6"  *ngIf="relatedProperties[i].title != null">{{ relatedProperties[i].title }}</div>
   </div>
</ng-container>

Кроме того, я должен сказать, что это довольно забавно, но если это то, что вы просите, это должно работать

edit:

Обратите внимание, что строгое значение null (a == null) лучше проверки на неопределенность (a === undefined), так как оно проверяет как неопределенное, так и нулевое значение. В вашем случае title != null.

Кроме того, вы можете создать итерацию, которая будет содержать структуру, которую вы хотите, более чистым способом.

вместо [title1, title2, title3, title4, title5, title6...] вы должны попытаться получить [[title1, title2, title3], [title4, title5, title6], ...], который намного чище и позволяет просто иметь два * ngFors внутри вашего шаблона

<element1 *ngFor="let innerArray of myArray; let i = index">
  <element2 *ngFor="let title of innerAray; let j = index">
  </element2>
</element1>

И, наконец, я предлагаю вамизбегайте вызова переменной 'p', это плохая практика.