javascript - 如何在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>