Angular ngFor按3元素分组渲染：去除多余外层div求助

我来帮你搞定这个需求！你需要先把原数组按每3个元素分成一组，再遍历分组后的数组，这样就能避免多余的div，同时正确拼接每组的元素。下面是两种可行的实现方案：

方案一：组件内分组方法（简单直接） #

首先在你的组件类里添加一个分组方法，把原数组拆成二维数组：

// 组件类代码
originalArray = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'];

// 自定义分组方法，参数为目标数组和每组元素数量
groupArray(array: string[], groupSize: number): string[][] {
  const groupedArr: string[][] = [];
  for (let i = 0; i < array.length; i += groupSize) {
    // 用slice截取每组元素
    groupedArr.push(array.slice(i, i + groupSize));
  }
  return groupedArr;
}

然后在模板里直接调用这个方法，遍历分组后的数组并拼接元素：

<div class="wrapper">
  <!-- 遍历分组后的数组，每个分组对应一个.main容器 -->
  <div class="main" *ngFor="let group of groupArray(originalArray, 3)">
    <!-- 用join('')把分组内的元素拼接成字符串 -->
    {{ group.join('') }}
  </div>
</div>

方案二：自定义管道（复用性更强） #

如果你的项目中多处需要用到数组分组，可以封装一个自定义管道，这样模板代码更简洁：

首先创建一个GroupPipe：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'group',
  pure: false // 若数组会动态更新，需设置为非纯管道
})
export class GroupPipe implements PipeTransform {
  transform(array: string[], groupSize: number): string[][] {
    const groupedArr: string[][] = [];
    for (let i = 0; i < array.length; i += groupSize) {
      groupedArr.push(array.slice(i, i + groupSize));
    }
    return groupedArr;
  }
}

记得在对应的模块中声明这个管道，然后在模板里使用：

<div class="wrapper">
  <!-- 使用管道分组，每组3个元素 -->
  <div class="main" *ngFor="let group of originalArray | group:3">
    {{ group.join('') }}
  </div>
</div>

为什么这个方案能解决你的问题？ #

你之前的实现大概率是直接遍历原数组，尝试通过index判断分组，但容易嵌套额外的ngFor导致生成多余的div。而先把数组预处理成二维分组数组后，每个分组直接对应一个.main容器，再用join('')拼接元素，完全符合你预期的HTML结构。

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