在引导网格中循环角度对象

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 上创建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

Answer 2

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