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

Question

我想实现一个设计，在其中我有一个动态数据数组，并且希望将它们呈现在每行仅3个引导程序列中，如下所示：

<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>