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

【问题标题】：How to implement fixed div columns inside ngFor?如何在 ngFor 中实现固定的 div 列？
【发布时间】：2019-02-21 10:55:22
【问题描述】：

我想实现一个设计，其中我有一个动态数据数组，并且我想将它们呈现在每行仅 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

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

【问题讨论】：

显示你的结果和数据
你没有得到相同的结果，因为你没有迭代行。也尝试迭代该行。
@SruthiVarghese 在了解如何处理此问题后不介意图片，我可以添加 css 来自定义视图
@Exterminator 我的结果就像所有数据看起来都排列在 3 列中，但呈现的每个项目都是一个 <div class="col-md-4><a>{{dynamic name}} </a> ，我不想要！，我想要很多 <a> div1，div2，div3

标签： javascript angular twitter-bootstrap ngfor

【解决方案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>

【讨论】：

你的答案看起来像我想要的，但很遗憾，我无法在 columns[0],columns[1],columns[2] 上表达你想要表达的意思
只是在列数组中分组数据