angular 6 遍历 bootstrap 列和网格

Question

这是我的 angular 代码，它从后端获取数据并通过 UI 作为卡片

向用户显示

<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 个对象，然后它应该将这些剩余对象提取到下一行或任何其他可能的解决方案通过 angular

中的列和行循环对象

Note:https://material.angular.io/components/grid-list/overview(I've tried this )
searched for solution to iterate that row part
tried to implement For login in that div row part

Answer 1

Bootstrap 是一个 12 格系统，我们希望每行 3 列，所以 12/3 = 4 在 Bootstrap 4 中：-

<div class="col-4" *ngFor="let item of post" >

在Bootstrap5中，我们多了一个选项-直接在行中定义：-

<div class="row row-cols-4" >

angular 6 遍历 bootstrap 列和网格

angular 6 looping through bootstrap column and grid

grid

typescript

angular-bootstrap

angular-material

angular