Цикл angular объекта в bootstrap сетке

Question

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Я просто хочу отображать карты в моем приложении angular как конкретную сетку

3 карты подряд, а затем в следующей строке

   <div class="container" *ngFor="let item of post">
      <div class="row">
        <div class="col-sm">
          <h2>{{item.title}}</h2>
    
        </div>
        
      </div>
    </div>

вот как получилось

instead of column

it's just fetched those object data as rows is there any way where we could loop over that grid and display data accordingly

Note:I have tried Angular material Grid 

i have tried using Flexlayout still no luck with that

введите описание изображения здесь

Мне просто нужен способ отображения таких данных

Answer 1

Проблема, с которой вы столкнулись, заключается в том, что вы создаете loop в контейнере div; который затем создает 3 контейнера на карту вместо одного контейнера.

   <div class="container" *ngFor="let item of post">
      <div class="row">
        <div class="col-sm">
          <h2>{{item.title}}</h2>
    
        </div>
        
      </div>
    </div>

Чтобы реализовать то, что вы хотите (контейнер с N картами), вы должны объявить loop на элементах карты .

   <div class="container">
      <div class="row">
        <div class="col-sm" *ngFor="let item of post">
          <h2>{{item.title}}</h2
        </div>
      </div>
    </div>

Таким образом у вас будет контейнер, затем строка и, наконец, список компонентов, созданных в результате итерации.

Вы можете немного прочитать здесь: Angular ng Например, , а здесь ngForOf Directive

Answer 2

<div class="container" >
      <div class="row">
        <div class="col-sm" *ngFor="let item of post">
          <h2>{{item.title}}</h2>
    
        </div>
        
      </div>
    </div>