如何在 ngFor 中实现固定的 div 列？

Question

我想实现一个设计，其中我有一个动态数据数组，我想在每行仅 3 bootstrap 列中呈现它们，如下所示：

<div class="row">

  <div class="col-md-4">
   <a>data</a>
   <a>data</a>
   <a>data</a>
  </div

 <div class="col-md-4">
   <a>data</a>
   <a>data</a>
   <a>data</a>
  </div

 <div class="col-md-4">
   <a>data</a>
   <a>data</a>
   <a>data</a>
  </div

</div>

输出应如下所示：

但是当我像这样将 *ngFor 放在 div 列时：

<div class="row">
  <div class="col-md-4" *ngFor="let d of data">
   <a>{{d.name}}</a>
  </div>
</div

它不会给出与第一种静态方法相同的结果，是否有助于重现动态数据循环以给出相同的结果？

Answer 1

你可以这样做：

columns: string[][] = [];
ngOnInit() {
    const itemsInColumn = Math.floor(this.data.length()/3);
    columns[0] = data.slice(0, itemsInColumn);
    columns[1] = data.slice(itemsInColumn, itemsInColumn * 2);
    columns[2] = data.slice(itemsInColumn * 2);
}

在模板中：

<div class="row">
     <div class="col-md-4" *ngFor="let c of columns">
          <a *ngFor="let d of c">{{d}}</a>
     </div>
</div>

如何在 ngFor 中实现固定的 div 列？

How to implement fixed div columns inside ngFor?

javascript

twitter-bootstrap

ngfor

angular