Angular嵌套ngFor在内层使用外层索引实现每行3列动态布局

实现方案 #

方案1：TS层预处理数组（推荐） #

先在组件逻辑层把一维数组拆分为每3个元素一组的二维数组，模板直接遍历即可，逻辑清晰性能更好。
component.ts 代码：

l = ["one", "two", "three", "four", "five", "six", "seven"];
groupedList: string[][] = [];

ngOnInit() {
  // 按3个元素一组拆分原数组
  for (let i = 0; i < this.l.length; i += 3) {
    this.groupedList.push(this.l.slice(i, i + 3));
  }
}

模板代码：

<div class="row" *ngFor="let row of groupedList">
  <div class="col" *ngFor="let item of row">
    <p>{{item}}</p>
  </div>
</div>

方案2：模板直接实现（无需修改TS代码） #

使用Angular内置的slice管道切割数组，适配你现有代码框架即可：

<div *ngFor="let content of l; index as i">
  <div class="row" *ngIf="i % 3 === 0">
    <div class="col" *ngFor="let item of l | slice:i : i+3">
      <p>{{item}}</p>
    </div>
  </div>
</div>

slice管道参数为[起始索引, 结束索引)，刚好匹配你需要的i到i+3的遍历区间，无需手动维护内层循环的索引值。

两种方案最终渲染出来的HTML结构都和你要求的完全一致，数组长度不足3的最后一行会自动适配实际元素数量。

内容的提问来源于stack exchange，提问作者yalpsid eman