在 bootstrap 网格中循环 angular 对象

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>

结果是这样

而不是列

它只是将那些对象数据作为行获取有什么方法可以循环遍历该网格并相应地显示数据

Note:I have tried Angular material Grid

我试过使用 Flexlayout 还是不行

我只需要一种可以像这样显示数据的可能方式

Answer 1

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

Answer 2

您面临的问题是您正在容器 div 上创建 loop；然后每张卡片创建 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 ngFor example 在这里 ngForOf Directive

在 bootstrap 网格中循环 angular 对象

Looping angular object in bootstrap grid

twitter-bootstrap

typescript

angular-bootstrap

angular-material

angular