角6循环通过引导程序列和网格

这是我的角度代码,它从后端获取数据并通过UI作为CArds向用户显示

<div class="container" >
  <div class="row" >
    <div class="col-sm" *ngFor="let item of post" >

      <mat-card class="example-card" >
        <mat-card-header>
          <div mat-card-avatar class="example-header-image"></div>
          <mat-card-title>{{item.title}}</mat-card-title>
          <mat-card-subtitle>50% off</mat-card-subtitle>
        </mat-card-header>
        <img mat-card-image src=asset/logo_500.png" alt="Photo of a Shiba Inu">
        <mat-card-content>
          <p>
content
            <br>
            click on "+" button

          </p>
        </mat-card-content>
        <mat-card-actions>
          <button mat-button>LIKE</button>
        </mat-card-actions>
      </mat-card>


    </div>
    
  </div>
</div>

但是这里的问题是,它获取所有对象并在单个完整列中显示该数据 有什么办法可以通过添加条件进行过滤 这部分

以这种方式检查该列是否包含3个以上的对象,则应将其余的对象提取到下一行 或任何其他可能的解决方案 通过角度的列和行循环对象

Note:https://material.angularjs.org/1.1.1/layout/introduction(I've tried this )
searched for solution to iterate that row part
tried to implement For login in that div row part