Отображать два столбца за строкой bootstrap angular

Question

У меня есть arrayData с 4 данными в моем файле компонента, и я хочу отобразить его с двумя столбцами в двух строках.

    myArrayData = [{id:1,pictureURL:'asset:mypict1.png'},{id:2,pictureURL:'asset:mypict2.png'},    {id:3,pictureURL:'asset:mypict3.png'},{id:4,pictureURL:'asset:mypict4.png'}]
 </p>

<code> <div class="row">
      <div class="col-md-6" *ngFor="let cat of myArrayData; let index=index">
        <div class="card">
          <a href="#"  >
            <img [src]="cat.pictureURL"
            />
         </a>
        </div>
      </div>
  </div>
</code>

но это не работает; я хочу иметь две строки с двумя столбцами. Есть идеи?

Answer 1

Вы видели этот пример? https://getbootstrap.com/docs/4.0/layout/grid/#equal -width-multi-row

В принципе, вы можете "принудительно" создать новую строку, используя класс w-100.

Я бы подошел к этому как-нибудь вот так, где вы будете вставлять новый элемент строки каждые 2 записи:

 <div class="row">
   <ng-container *ngFor="let cat of items; let index=index">
      <div class="col-md-6">
        <div class="card">
          <a href="#"  >
            <img [src]="cat.pictureURL"
            />
         </a>
        </div>
      </div>
      <div class="w-100" *ngIf="(index+1) % 2 === 0"></div>
   </ng-container>
  </div>